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

Matthew C.

The Problem

You are trying to import an item such as a function from one JavaScript file into another JavaScript file. For example:

import { toKebabCase } from '/yourFile.js';

After importing this function, you get the following error:

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

This error occurs because the JavaScript file uses an import statement in a file that’s not an ES module. ECMAScript is the language specification that JavaScript conforms to. The ECMAScript 6 (ES6), also known as ES2015, specification revision added ES modules to JavaScript. Modules were added to allow programmers to split JavaScript programs into separate modules that allow for easy sharing of items such as variables and functions and better organization of code.

A module is a JavaScript file that exports one or more values using the export statement. For example:

export const startVal = 2; export function myFunction() { // }

The value can then be imported into another module using the import statement. For example:

import { startVal, myFunction } from './yourFile.js';

ES modules can make items such as variables, available to other modules that are outside of their scope using an export statement. Before modules, you would have to move a value to a higher scope, such as the global scope, if you wanted to make it available outside of its scope. Adding values to the global scope can lead to all sorts of issues and makes code hard to maintain. Modules allow for better code organization, sharing of values is explicit. Most modern browsers support ES modules.

Node.js has two module systems: CommonJS modules and ES modules. ES modules were added to Node.js in version 15.3.0.

The Solution

If your JavaScript file was added to your project using a <script> tag, add a type attribute with a value of “module” to your script tag:

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

Node.js, version 15.3.0 and above support ES modules. Older versions use CommonJS only unless you use a library such as esm that allow for ES modules in Node.js version 6 and above. In Node.js versions that support ES modules, you need to set the value of the "type" field to “module” in the package.json file:

{ "type": "module" }

Alternatively, you can use the .mjs file extension to indicate to Node.js that the file is an ES module.

Get Started With Sentry

Get actionable, code-level insights to resolve JavaScript performance bottlenecks and errors.

  1. Create a free Sentry account

  2. Create a JavaScript project and note your DSN

  3. Grab the Sentry JavaScript SDK

<script src="https://browser.sentry-cdn.com/7.110.1/bundle.min.js"></script>
  1. Configure your DSN
Sentry.init({ dsn: 'https://<key>@sentry.io/<project>' });

Loved by over 4 million developers and more than 90,000 organizations worldwide, Sentry provides code-level observability to many of the world’s best-known companies like Disney, Peloton, Cloudflare, Eventbrite, Slack, Supercell, and Rockstar Games. Each month we process billions of exceptions from the most popular products on the internet.

Share on Twitter
Bookmark this page
Ask a questionJoin the discussion

Related Answers

A better experience for your users. An easier life for your developers.

    TwitterGitHubDribbbleLinkedinDiscord
© 2024 • Sentry is a registered Trademark
of Functional Software, Inc.