Menu
Quoting babel docs https://babeljs.io/docs/en/babel-standalone#usage :
"If you want to use your browser's native support for ES Modules, you'd normally need to set a type="module" attribute on your script tag. With @babel/standalone, set a data-type="module" attribute instead"
For some reason though, when including my main index.js file (which imports other js / jsx files using import), it seems like babel is converting my import statements to require statements because I get the ReferenceError: require is not defined.
The only way around this I found was to use the transform-modules-umd plugin and include all my js files as scripts. Not sure if this is a bug where data-type="module" doesn't work or if I'm missing something.
These are my scripts tags in index.html
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script src="index.js" type="text/babel" data-type="module"></script>
Thanks for the help
982
asked Jul 31 '26 04:07
For (my) future reference, here's a complete working example.
You can just put the code below into index.html and run it in a web browser and you'll have a working React app with JSX.
source: https://codesandbox.io/s/dikoh?file=/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
</head>
<body>
<div id="main"></div>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel" data-presets="react" data-type="module">
import {
ChakraProvider,
Box,
Text
} from "https://cdn.skypack.dev/@chakra-ui/react";
import React, { useRef } from "https://cdn.skypack.dev/react";
import ReactDOM from "https://cdn.skypack.dev/react-dom";
const MyText = ({ color, ...props }) => {
return <Text fontWeight="bold" as="span" {...props} />;
};
function Foo() {
return (
<div>
Foo
</div>
);
}
function App() {
return (
<Box>
Hello <MyText>Skypack</MyText>
<Foo/>
</Box>
);
}
ReactDOM.render(
<ChakraProvider>
<App />
</ChakraProvider>,
document.getElementById("main")
);
</script>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
