JS Fix for “SyntaxError: Cannot use import statement outside a  module”

If you’re experiencing the following error when working with JavaScript in a browser or Node.js give the following approaches a try to solve it:

Uncaught SyntaxError: Cannot use import statement outside a module” when importing ECMAScript 6

Common Cases of “SyntaxError: Cannot use import statement outside a module”

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

Node.js

The following error working with modules when switching from require to import in Node.js

SyntaxError: Cannot use import statement outside a module
  at wrapSafe (internal/modules/cjs/loader.js:992:16)
  at Module._compile (internal/modules/cjs/loader.js:1040:27)
  at Object.Module._extensions..js (internal/modules/cjs/loader.js:1097:10)
  at Module.load (internal/modules/cjs/loader.js:941:32)
  at Function.Module._load (internal/modules/cjs/loader.js:782:14)
  at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)
  at internal/main/run_main_module.js:17:47

Node.js uses CommonJS modules by default, which uses require(...) to import external dependencies. If you attempt to copy and paste an import statement from an npm readme document, you may trigger this error because out of the box import won’t work.

There are two ways to enable support for ES modules (e.g. import) in Node.js:

1. Change the file extension from .js to .mjs
2. Add or change "type": "module", in your package.json file
3. Run your node scripts with the --input-type flag set to module: node --input-type module ...

You may need to adjust the way your scripts work though, because you’ll need to treat your file as an actual module that exports functionality to consuming files. Once this is in place, you may come across another error:

ReferenceError: require is not defined

This is most likely triggered when a file tries to use both import and require module patterns, which isn’t possible. You’ll need to work with one or the other, and if you want import to be the one, than you’ll need to replace your require statements with matching import‘s.

const { host, port } = require('./config');

This require or CommonJS module import would be replaced with:

import { host, port } from './config';

Browser

When working with ES 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 JS module. Once you do this you can import that module without issues.

If you do this and you still see an error that’s similar to the following then you may be loading in the uncompiled source version of a module, rather than a compiled dist script:

Uncaught SyntaxError: Cannot use import statement outside a module.

Sources for modules are usually in a src/ folder, so if the script you’re loading contains “src/” in the URL then you’re using the native source code in an unaltered/unbundled state, leading to the following error: This should be fixed by using the bundled version since the package is using rollup or something similar to create a bundle.

This can also happen if you’re attempting to import a non-module npm package as a module, but it’s been defined globally on the window. If that’s the case, then look for an “es” port of the package. For example, I commonly work with the lodash-es npm package instead of lodash so that I’m able to use ES6 imports for individual functions.

Helpful Resources

• Exploring JS Book: Chapter 16, Modules
• Node.js Documentation: Determining module system