Index1.js:1 Uncaught SyntaxError: Cannot use import statement outside a module

React
1

In the beginning of react course Mosh does a quick review of ES6.

I followed along to get refreshed but got this error in my console when he was reviewing modules.

Mosh’s console he gets “teach” and I get “Uncaught SyntaxError: Cannot use import statement outside a module”

Any ideas what might be wrong?

Thank you!!

Copied Code (Image):
(There is no red line in the code itself, it shows here because I pasted in into Microsoft Word)

Code
Code1262×358 12.1 KB

2

To solve the error, set the type attribute to module when loading the script in your HTML code. When working with ECMAScript modules and JavaScript module import statements in the browser, you’ll need to explicitly tell the browser that a script is module. To do this, you have to add type=“module” onto any ‹script› tags that point to a JavaScript module. Once you do this you can import that module without issues.

<script type="module" src="./index.js"></script>

If you are working on Node.js or react applications and using import statements instead of require to load the modules, then ensure your package.json has a property “type”: “module” as shown below.

{
  // ...
  "type": "module",
  // ...
}

Moreover, In some cases, you may have to use both import and require statements to load the module properly.

// import { parse } from 'node-html-parser';
parse = require('node-html-parser');

This error "Cannot use import statement outside a module " can happen in different cases depending on whether you’re working with JavaScript on the server-side with Node.js , or client-side in the browser. There are several reasons behind this error, and the solution depends on how you call the module or script tag.