Using ES Modules with babel-standalone

D

2

7

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

Driscoll answered 14/9, 2020 at 11:49 Comment(0)

D

2

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

Driscoll answered 21/10, 2020 at 22:13 Comment(0)

L

6

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>

Launch answered 28/8, 2021 at 0:3 Comment(1)

I got this error

Uncaught SyntaxError: The requested module '/-/[email protected]/dist=es2019,mode=imports/unoptimized/jsx-runtime.js' does not provide an export named 'jsx' (at css-reset.js:3:9)

– Apodosis 10/4 at 5:3

D

2

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

Driscoll answered 21/10, 2020 at 22:13 Comment(0)

Recommended topics

Hot tags