Material-components-web-components: mwc-drawer cannot be loaded as a module from unpkg.com

Created on 10 Apr 2020 · 4Comments · Source: material-components/material-components-web-components

My Pain

I would like to use the mwc-drawer and import the module from unpkg.com. But it fails errors

Loading module from “https://unpkg.com/wicg-inert@%5E3.0.0?module” was blocked because of a disallowed MIME type (“text/html”).
issue.html
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://unpkg.com/wicg-inert@%5E3.0.0?module. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

Loading module from “https://unpkg.com/@material/drawer@=6.0.0-canary.35a32aaea.0/dismissible/foundation.js?module” was blocked because of a disallowed MIME type (“text/html”).
issue.html
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://unpkg.com/@material/drawer@=6.0.0-canary.35a32aaea.0/dismissible/foundation.js?module. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

Module source URI is not allowed in this document: “https://unpkg.com/wicg-inert@%5E3.0.0?module”. issue.html:7:1
Module source URI is not allowed in this document: “https://unpkg.com/@material/drawer@=6.0.0-canary.35a32aaea.0/dismissible/foundation.js?module”.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My Example App</title>
    <script src="https://unpkg.com/@webcomponents/webcomponentsjs@next/webcomponents-loader.js"></script>
    <script type="module" src="https://unpkg.com/@material/[email protected]/mwc-drawer.js?module"></script>
    </head>
<body>
    Hello World
</body>
</html>

Additional Context

I've created a bug report on this previously https://github.com/material-components/material-components-web-components/issues/1096 but I only described one error (which has been solved ). I did not know there was more.

The issue report here is not on a specific error. Its on not being able to use mwc-drawer directly from unpkg.com.

FYI @e111077

Components Bug

Source

MarcSkovMadsen

Most helpful comment

Hi @e111077

Just for info. So great that you could help out. I managed to get a POC of Panel and mwc working.

Its going to be a contribution to Panel here https://github.com/holoviz/panel/pull/1254. I hope its a a game changer for Panel and Analytics apps in Python.

There still a lot of things to get right though. But the POC is here.

Thanks so much.

Have a nice Easter.

material_template

MarcSkovMadsen on 10 Apr 2020

❤1 🎉1

All 4 comments

Seems like the exact same issue with wicg-inert

e111077 on 10 Apr 2020

Hello, I am unable to reproduce this issue. Are you sure it's not another package that is causing this?

Here is an attempted reproduction. Can you please modify it and reproduce the issue?

https://jsbin.com/filepawese/5/edit?html,console,output

e111077 on 10 Apr 2020

Hi @e111077

Your example works for me.

I was able to reproduce the error initially with my code. But after having run your code in my browser (firefox) I no longer can. My guess is that some kind of caching was in play.

Thanks for all your help.

MarcSkovMadsen on 10 Apr 2020

👍1

Hi @e111077

Just for info. So great that you could help out. I managed to get a POC of Panel and mwc working.

Its going to be a contribution to Panel here https://github.com/holoviz/panel/pull/1254. I hope its a a game changer for Panel and Analytics apps in Python.

There still a lot of things to get right though. But the POC is here.

Thanks so much.

Have a nice Easter.

material_template

MarcSkovMadsen on 10 Apr 2020

❤1 🎉1

Was this page helpful?

0 / 5 - 0 ratings