Open KnisterPeter opened 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.
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/utilsThis 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.