Uncaught SyntaxError: Cannot use import statement outside a module
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.
