0

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.

5
  • @cilefen I updated my .libraries.yml file to be mgt: remote: https://github.com/microsoftgraph/microsoft-graph-toolkit license: name: MIT url: https://github.com/microsoftgraph/microsoft-graph-toolkit/blob/main/LICENSE gpl-compatible: true js: https://unpkg.com/@microsoft/mgt@2/dist/bundle/mgt-loader.js: { type: external } but I still get the parser-blocking cross site warning and it doesn't load.
    – Jordan
    May 3, 2023 at 16:19
  • Then this isn't a Drupal question. stackoverflow.com/questions/39610829/…
    – cilefen
    May 3, 2023 at 17:10
  • I've already tried adding async to try an resolve this
    – Jordan
    May 3, 2023 at 17:22
  • I get "mgt-loader.js:68 Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened."
    – Jordan
    May 3, 2023 at 17:30

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.