Using ES Modules with babel-standalone

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

Answer

My question was answered by Amareis on babel’s github page: https://github.com/babel/babel/discussions/12059

The problem is babel doesn’t transpile modules imported through ES modules, they have to explicitly be included as scripts with the “type” set to “text/babel”. So a JSX file imported through ES modules in the index.js script is imported after index.js is transpiled by babel, and is not itself transpiled.

Also got a suggestion to fetch and execute my scripts with a service worker for development purposes. babel-standalone transforms them after fetching