“Uncaught SyntaxError: Cannot use import statement outside a module” after babel compilation

Question

Im using this docs https://reactjs.org/docs/add-react-to-a-website.html#run-jsx-preprocessor to add a React component with JSX to my website. I run this command to compile:

npx babel --watch src --out-dir . --presets react-app/prod

And I get this error in chrome console:

Uncaught SyntaxError: Cannot use import statement outside a module

Which comes from this line in the compiled file: import _regeneratorRuntime from 'babel-runtime/regenerator';

I don't get it- in the docs they state that you can use babel just like a CSS preprocessor, but here it seems that _regeneratorRuntime depends on the node_module folder, but i'm not planing to run npm i in production, it is only to compile my JSX to a .js file which should be a standalone file any browser can run.

In package.json:

"dependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-react-app": "^3.1.2"
  }

In HTML footer:

<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 type="text/javascript" src="/js/react-components/index.js"></script> <!-- index.js compiled from src/index.js -->

Answer 1

You need to create a babelrc file in your project or simply run this command npm install --save-dev @babel/preset-react Also add this code: { "presets": ["@babel/preset-react"] }