Uncaught SyntaxError: Cannot use import statement outside a module” when importing ECMAScript 6 [with example]

The “Uncaught SyntaxError: Cannot use import statement outside a module” error is usually caused by trying to use the import statement in a JavaScript file that is not being transpired by a module bundler.

In order to use the import statement in a JavaScript file, the file must be processed by a module bundler such as Webpack or Rollup. This is because the import statement is part of the ECMAScript 6 (ES6) module system, which is not natively supported by modern web browsers.

To fix this error, you can either use a module bundler to transpile your JavaScript files, or you can use a different syntax for importing modules such as the ‘<script>‘ tag or the ‘require‘ function.

For example, instead of using the ‘import‘ the statement, you can use the’ <script>‘ tag to include a JavaScript file in an HTML file:

<script src="path/to/my-module.js"></script>

Or you can use the ‘require‘ function in a Node.js script to import a module:

const myModule = require('./my-module');

It’s also worth noting that the ‘import‘statement is only supported in modern browsers that have implemented the ES6 module system. If you need to support older browsers, you may need to use a polyfill or a transpiler such as Babel to convert the ‘import‘ statements into a syntax that is compatible with older browsers.

RELATED TO JAVASCRIPT: What is the JavaScript version of sleep()? [All Methods]