skypackjs / skypack-cdn

An issue tracker for the CDN
107 stars 5 forks source link

@material-ui/core breaks with skypack #170

Open KnisterPeter opened 3 years ago

KnisterPeter commented 3 years ago

When importing @material-ui/core from skypack, somewhere in the dependency tree is an import for this URL: https://cdn.skypack.dev/-/@material-ui/core@v4.11.4-SaQ0KPzNLsp4Nqk6uDbZ/dist=es2020,mode=raw/utils

This looks fine, but the results of this import are the following (just examples, there are way more):

In that files, are plain npm imports like react or @material-ui/utils. These obviously break and cannot work.

x-yuri commented 3 years ago

For me, although it works to some extent (e.g. the Button component), it doesn't work with a TextField:

<!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/@material-ui/core@4.12.3/TextField';
        import Button from 'https://cdn.skypack.dev/@material-ui/core@4.12.3/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 2 such errors:

react-dom.js:4136 Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=object&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings. at Vg (react-dom.js:5799) at react-dom.js:2784 at fi (react-dom.js:3409) at gi (react-dom.js:3419) at ck (react-dom.js:5617) at bk (react-dom.js:5054) at ak (react-dom.js:5047) at Tj (react-dom.js:5030) at Lj (react-dom.js:4798) at Jg (react-dom.js:4646)

And the error message is:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

With unpkg.com both work:

<!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/@material-ui/core@4.12.3/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>

You might want to be more verbose. Since I can't reproduce what you say.