6

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

2 Answers 2

5

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>
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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.