# SyntaxError: Cannot use import statement outside a module

> This error happens when a JavaScript file uses an import or export statement in a file that is not loaded as an ES module. Learn how to fix it with type module

**URL:** https://sentry.io/answers/uncaught-syntax-error-cannot-use-import-statement-outside-a-module/

---

## The Problem

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

```js
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](https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/). [ECMAScript](https://tc39.es/ecma262/#sec-modules) 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`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export) statement. For example:

```js
export const startVal = 2;

export function myFunction() {
  //
}
```

The value can then be imported into another module using the [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) statement. For example:

```js
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](https://caniuse.com/es6).

Node.js has two module systems: [CommonJS](https://nodejs.org/api/modules.html) 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:

```html
<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](https://www.npmjs.com/package/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"`](https://nodejs.org/api/packages.html#type) field to "module" in the `package.json` file:

```json
{
  "type": "module"
}
```

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

---

*Source: [sentry.io/answers/uncaught-syntax-error-cannot-use-import-statement-outside-a-module/](https://sentry.io/answers/uncaught-syntax-error-cannot-use-import-statement-outside-a-module/)*