@mui/material breaks with skypack

x-yuri commented 2 years ago

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <script type="module">
        import React from 'https://cdn.skypack.dev/react@17.0.2';
        import ReactDOM from 'https://cdn.skypack.dev/react-dom@17.0.2';
        import TextField from 'https://cdn.skypack.dev/@mui/material@5.0.6/TextField';
        import Button from 'https://cdn.skypack.dev/@mui/material@5.0.6/Button';

        const e = React.createElement;

        ReactDOM.render(
            e(Button, {variant: 'contained', color: 'primary'}, 'Button'),
            // e(TextField),
            document.getElementById('root')
        );
    </script>
</head>
<body>
    <div id="root"></div>
</body>
</html>

In the console I get:

Uncaught SyntaxError: import not found: jsxs

With unpkg.com it works:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@mui/material@5.0.6/umd/material-ui.development.js"></script>
    <script type="module">
        const { Button, TextField } = MaterialUI;

        const e = React.createElement;

        ReactDOM.render(
            e(Button, {variant: 'contained', color: 'primary'}, 'Button'),
            // e(TextField),
            document.getElementById('root')
        );
    </script>
</head>
<body>
    <div id="root"></div>
</body>
</html>

nihgwu commented 2 years ago

I got similar issue with @mui/material SyntaxError: The requested module '/-/react@v17.0.1-yH0aYV1FOvoIPeKBbHxg/dist=es2019,mode=imports/unoptimized/jsx-runtime.js' does not provide an export named 'jsx'

And I believe it's not only for mui but for all packages that use the new jsx https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html

ysulyma commented 2 years ago

Running into this as well.

nihgwu commented 2 years ago

I switched to https://esm.sh/ and it works like a charm, demo

x-yuri commented 2 years ago

Last time I checked it had issues.

I just tried your demo and:

I wrote a gist about CDNs. What's missing there is jspm, which let me use mui. I don't remember the reasons, but back then I came to conclusion that jspm is the most promising CDN. At least, it took some while, but in the end they solved my issue. This one is still open.

nihgwu commented 2 years ago

@x-yuri That's because esm.sh upgrades again, I just updated my website, to make it work, you have to refresh again as it's using Service Worker to lock react version to avoid multi react instance

x-yuri commented 2 years ago

Indeed, now the demo works.

skypackjs / skypack-cdn

@mui/material breaks with skypack #233