Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

@mui/material breaks with skypack #233

Open
x-yuri opened this issue Oct 29, 2021 · 6 comments
Open

@mui/material breaks with skypack #233

x-yuri opened this issue Oct 29, 2021 · 6 comments

Comments

@x-yuri
Copy link

x-yuri commented Oct 29, 2021 

<!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
Copy link

nihgwu commented Jan 17, 2022

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
Copy link

ysulyma commented Mar 10, 2022

Running into this as well.

@nihgwu
Copy link

nihgwu commented Mar 10, 2022

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

@x-yuri
Copy link
Author

x-yuri commented Apr 9, 2022 •
edited
Loading

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
Copy link

nihgwu commented Apr 10, 2022

@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
Copy link
Author

x-yuri commented Apr 10, 2022 •
edited
Loading

Indeed, now the demo works.

@ysulyma ysulyma mentioned this issue May 31, 2022
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@ysulyma @x-yuri @nihgwu