I am creating a custom module and want to use microsoft graph toolkit, specifically the file-list component (https://learn.microsoft.com/en-us/graph/toolkit/components/file-list). I've created a my_module.libraries.yml file which looks like this:
mgt:
js:
https://unpkg.com/@microsoft/mgt@2/dist/bundle/mgt-loader.js: {}
file-list:
js:
js/file-list.js: {}
dependencies:
- core/drupal
- core/once
and a template that looks like this:
{{ attach_library('my_module/mgt') }}
{{ attach_library('my_module/file-list') }}
<mgt-msal-provider client-id="{{ client_id }}"></mgt-msal-provider>
<ul class="breadcrumb" id="nav">
<li>
<a id="home">Files</a>
</li>
</ul>
<mgt-file-list group-id="{{ paragraph.field_group_id.value }}" item-path="{{ paragraph.field_item_path.value }}"></mgt-file-list>
My problem is that in the console, I get:
mgt-loader.js:68 A parser-blocking, cross site (i.e. different eTLD+1) script, https://unpkg.com/@microsoft/mgt@2/dist/bundle/wc/webcomponents-loader.js, is invoked via document.write. The network request for this script MAY be blocked by the browser in this or a future page load due to poor network connectivity. If blocked in this page load, it will be confirmed in a subsequent console message. See https://www.chromestatus.com/feature/5718547946799104 for more details.
I've read up on the issue some but still not quite sure how I can use what I need without getting this warning. I use asset packagist in this project some so I've also tried to add npm-asset/microsoft--mgt via composer which goes into my libraries directory of my project. Then I switched the my_module.libraries.yml to look like this:
mgt:
js:
/libraries/microsoft--mgt-components/dist/es6/components/mgt-file-list/mgt-file-list-css.js: {}
/libraries/microsoft--mgt-components/dist/es6/components/mgt-file-list/mgt-file-list-css.js.map: {}
/libraries/microsoft--mgt-components/dist/es6/components/mgt-file-list/mgt-file-list.js: {}
/libraries/microsoft--mgt-components/dist/es6/components/mgt-file-list/mgt-file-list.js.map: {}
/libraries/microsoft--mgt-components/dist/es6/components/mgt-file-list/mgt-file-list.theme-css.js: {}
/libraries/microsoft--mgt-components/dist/es6/components/mgt-file-list/mgt-file-list.theme-css.js.map: {}
/libraries/microsoft--mgt-components/dist/es6/components/mgt-file-list/strings.js: {}
/libraries/microsoft--mgt-components/dist/es6/components/mgt-file-list/strings.js.map: {}
/libraries/microsoft--mgt-msal-provider/dist/es6/MsalProvider.js: {}
/libraries/microsoft--mgt-msal-provider/dist/es6/MsalProvider.js.map: {}
/libraries/microsoft--mgt-msal-provider/dist/es6/index.js: {}
/libraries/microsoft--mgt-msal-provider/dist/es6/index.js.map: {}
/libraries/microsoft--mgt-msal-provider/dist/es6/mgt-msal-provider.js: {}
/libraries/microsoft--mgt-msal-provider/dist/es6/mgt-msal-provider.js.map: {}
file-list:
js:
js/file-list.js: {}
dependencies:
- core/drupal
- core/once
But when I try this, I get an error that says "Cannot use import statement outside a module" for some of the js files, the .js.map files say "Unexpected token ':'", and then strings.js and index.js files say "Unexpected token 'export'". I'd really appreciate some help on this, it is the first time I've tried to do something like this. I've created other custom modules before but first time I've run into either of these issues.
