About "Cannot use import statement outside a module" in JavaScript
Tags: javascript, webdev, beginners
Published: 2023-02-05 13:24:08

> ✋ **Update:** This post was originally published on my blog [decodingweb.dev](https://www.decodingweb.dev), where you can read the [latest version](https://www.decodingweb.dev/javascript-syntaxerror-cannot-use-import-statement-outside-module-fix) for a 💯 user experience. _~reza_

The error “cannot use import statement outside a module” occurs when you use the import statement outside an ES (ECMAScript) module.

If you’re using Node.js, you need to set Node’s module system to ES modules – by adding `type: "module"` to your `package.json` file. However, if you’re getting this error in your web browser, add `type="module"` to your `<script>` tag.

Here’s what the error looks like in the Node.js environment:

```
(node:40660) Warning: To load an ES module, set type: module in the package.json or use the .mjs extension.
(Use  to show where the warning was created)
/var/www/node-test/app.js:1
import { isOdd } from './utils.js'
^^^^^^

SyntaxError: Cannot use import statement outside a module
```

And in the browser:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vjo62vi6jhceosl64loq.jpg)


## How to fix "cannot use import statement outside a module" error

As mentioned earlier, this error can happen in two environments:

- <u>Node.js</u>
- <u>Web browser</u>

Let's see how we can fix the issue on either of these environments.

**Node.js:** Node.js supports two module systems for loading modules:

- The CommonJs Modules (the default module system)
- ES Modules

If you're getting the error in Node.js, the reason is probably Node.js isn't configured to use the **ESM module** system. Node's default module system is **CommonJS**, where you export modules with `module.exports` and load them via `require()`.

Set Node's module system to ES modules by adding `"type": "module"` to your `package.json` file.

```
{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "type": "module",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "",
  "license": "ISC"
}
```

If you don't have a `package.json` file yet, you can create one by running `npm init` in your project's directory.

```
npm init
```

Npm will ask you to provide information about your package, such as name, version, description, author, etc. This information is optional, though.

The above should fix the issue in your Node.js app.

**If you're getting the error in the browser:** Most browsers have native support for ECMAScript Modules. However, if you get this error in your browser, you need to add `type="module"` to your `<script>` tag:

```html
<script src="./main.js" type="module">
```

And in case you want to write your code directly in the HTML document:

```html
<script type="module">
   // Your JavaScript code here
</script>
```

Alright, I think that does it! I hope this quick guide could solve your problem.

Thanks for reading.

---

**❤️ You might like:**

- [I got TypeError: getElementById is not a function in JavaScript (Resolved)](https://www.decodingweb.dev/typeerror-getelementbyid-is-not-a-function-javascript)
- [I ran into "__dirname is not defined in ES module scope" (Fixed)](https://www.decodingweb.dev/dirname-is-not-defined-in-es-module-scope-fix)
- [Cannot find module error in Node.js (Fixed)](https://www.decodingweb.dev/cannot-find-module-error-in-node-js-fixed)
- [SyntaxError: Unexpected end of JSON input in JavaScript (Fixed)](https://www.decodingweb.dev/syntaxerror-unexpected-end-of-json-input-in-javascript)
- [How to fix "ReferenceError: document is not defined" in JavaScript](https://www.decodingweb.dev/how-to-solve-referenceerror-document-is-not-defined)