SyntaxError: Cannot use import statement outside a module

If anyone is running into this issue with TypeScript, the key to solving it for me was changing

    "target": "esnext",
    "module": "esnext",

to

    "target": "esnext",
    "module": "commonjs",

In my tsconfig.json. I was under the impression "esnext" was the "best", but that was just a mistake.

For those who were as confused as I was when reading the answers, in your package.json file, add "type": "module" in the upper level as show below:

{
  "name": "my-app",
  "version": "0.0.0",
  "type": "module",
  "scripts": { ...
  },
  ...
}

According to the official documentation:

import statements are permitted only in ES modules. For similar functionality in CommonJS, see import().

To make Node.js treat your file as an ES module, you need to (Enabling):

• add "type": "module" to package.json
• add "--experimental-modules" flag to the Node.js call

I ran into the same issue and it's even worse: I needed both "import" and "require"

1. Some newer ES6 modules works only with import.
2. Some CommonJS works with require.

Here is what worked for me:

1. Turn your js file into .mjs as suggested in other answers

2. "require" is not defined with the ES6 module, so you can define it this way:

   import { createRequire } from 'module'
   const require = createRequire(import.meta.url);
   

   Now 'require' can be used in the usual way.

3. Use import for ES6 modules and require for CommonJS.

Some useful links: Node.js's own documentation. difference between import and require. Mozilla has some nice documentation about import

I had the same issue and the following has fixed it (using Node.js 12.13.1):

• Change .js files extension to .mjs
• Add --experimental-modules flag upon running your app.
• Optional: add "type": "module" in your package.json

More information: https://nodejs.org/api/esm.html

First we'll install @babel/cli, @babel/core and @babel/preset-env:

npm install --save-dev @babel/cli @babel/core @babel/preset-env

Then we'll create a .babelrc file for configuring Babel:

touch .babelrc

This will host any options we might want to configure Babel with:

{
  "presets": ["@babel/preset-env"]
}

With recent changes to Babel, you will need to transpile your ES6 before Node.js can run it.

So, we'll add our first script, build, in file package.json.

"scripts": {
  "build": "babel index.js -d dist"
}

Then we'll add our start script in file package.json.

"scripts": {
  "build": "babel index.js -d dist", // replace index.js with your filename
  "start": "npm run build && node dist/index.js"
}

Now let's start our server.

npm start

I tried with all the methods, but nothing worked.

I got one reference from GitHub.

To use TypeScript imports with Node.js, I installed the below packages.

1. npm i typescript --save-dev

2. npm i ts-node --save-dev

Won't require type: module in package.json

For example,

{
  "name": "my-app",
  "version": "0.0.1",
  "description": "",
  "scripts": {

  },
  "dependencies": {
    "knex": "^0.16.3",
    "pg": "^7.9.0",
    "ts-node": "^8.1.0",
    "typescript": "^3.3.4000"
  }
}

Node.js v14.16.0:

For those who've tried .mjs and got:

Aviator@AW:/mnt/c/Users/Adrian/Desktop/Programming/nodejs_ex$ node just_js.mjs
file:///mnt/c/Users/Adrian/Desktop/Programming/nodejs_ex/just_js.mjs:3
import fetch from "node-fetch";
       ^^^^^

SyntaxError: Unexpected identifier

and who've tried import fetch from "node-fetch"; and who've tried const fetch = require('node-fetch');

Aviator@AW:/mnt/c/Users/Adrian/Desktop/Programming/nodejs_ex$ node just_js.js
(node:4899) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
/mnt/c/Users/Adrian/Desktop/Programming/nodejs_ex/just_js.js:3
import fetch from "node-fetch";
^^^^^^

SyntaxError: Cannot use import statement outside a module

and who've tried "type": "module" to package.json, yet continue seeing the error,

{
  "name": "test",
  "version": "1.0.0",
  "description": "to get fetch working",
  "main": "just_js.js",
  "type": "module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "MIT"
}

I was able to switch to Axios without a problem.

import axios from 'axios'; <-- put at top of file. Example:

axios.get('https://www.w3schools.com/xml/note.xml').then(resp => {
    console.log(resp.data);
});

If you are using ES6 JavaScript imports:

1. install cross-env
2. in package.json change "test": "jest" to "test": "cross-env NODE_OPTIONS=--experimental-vm-modules jest"
3. more in package.json, add these:

    ...,
    "jest": {
        "transform": {}
    },
    "type": "module"

Explanation:

cross-env allows to change environment variables without changing the npm command. Next, in file package.json you change your npm command to enable experimental ES6 support for Jest, and configure Jest to do it.

I'm new to Node.js, and I got the same issue for the AWS Lambda function (using Node.js) while fixing it.

I found some of the differences between CommonJS and ES6 JavaScript:

ES6:

• Add "type":"module" in the package.json file

• Use "import" to use from lib.

  Example: import jwt_decode from jwt-decode

• Lambda handler method code should be define like this

  "exports.handler = async (event) => { }"

CommonJS:

• Don't add "type":"module" in the package.json file

• Use "require" to use from lib.

  Example: const jwt_decode = require("jwt-decode");

• The lambda handler method code should be defines like this:

  "export const handler = async (event) => { }"

Step 1

yarn add esm

or

npm i esm --save

Step 2

package.json

"scripts": {
  "start": "node -r esm src/index.js",
}

Step 3

nodemon --exec npm start

To use import, do one of the following.

1. Rename the .js file to .mjs
2. In package.json file, add {type:module}

In my case. I think the problem is in the standard node executable. node target.ts

I replaced it with nodemon and surprisingly it worked!

The way using the standard executable (runner):

node target.ts

The way using the nodemon executable (runner):

nodemon target.ts

Do not forget to install nodemon with npm install nodemon ;P

Note: this works amazing for development. But, for runtime, you may execute node with the compiled .js file!

The problem is that node does not accept TypeScript files. Instead, ts-node might be the perfect replacement.

If you want to use Babel, I have a simple solution for that!

Remember this is for Node.js example: like an Express.js server!

If you are going to use React or another framework, look in the Babel documentation!

First, install (do not install unnecessary things that will only trash your project!)

npm install --save-dev @babel/core @babel/node

Just 2

Then configure your Babel file in your repository!

File name:

babel.config.json

{
    "presets": ["@babel/preset-env"]
}

If you don't want to use the Babel file, use:

Run in your console, and script.js is your entry point!

npx babel-node --presets @babel/preset-env -- script.js

The full information is on @babel/node.

This error also comes when you run the command

node filename.ts

and not

node filename.js

Simply put, with the node command we will have to run the JavaScript file (filename.js) and not the TypeScript file unless we are using a package like ts-node.

I had this error in my NX workspace after upgrading manually. The following change in each jest.config.js fixed it:

transform: {
  '^.+\\.(ts|js|html)$': 'jest-preset-angular',
},

to

transform: {
  '^.+\\.(ts|mjs|js|html)$': 'jest-preset-angular',
},

I had this issue when I was running a migration.

It's an ES5 vs. ES6 issue.

Here is how I solved it:

I run

npm install @babel/register

and add

require("@babel/register")

at the top of my .sequelizerc file my.

And go ahead to run my sequelize migrate. This is applicable to other things, apart from sequelize.

Babel does the transpiling.

If you are using the Vite - React application with the Speedy Web Compiler (SWC) and you tried to import the various methods of the Jest testing library ({import { describe, expect, test } from "@jest/globals";), all your tests will run individually and outside the module. Hence you might get the error as:

SyntaxError: Cannot use import statement outside a module

Since you are using SWC, the Babel configuration won't help. So it could be resolved by just giving a simple development dependency:

npm install --save-dev @types/jest

Later remove the import statement, use methods (describe, test, expect, afterAll, afterEach, beforeAll, beforeEach, fail, fdescribe, fit, it, jasmine, jest, pending, spyOn, xdescribe, xit, xtest) directly since there are treated as globals. Install the link and other documentation here! @types/jest

Test your sum.test.js by npm run test, supposing you have"test": "jest" in scripts commands and jest in dev dependency:

const sum = (val1, val2) => {
  return val1 + val2;
};

describe("sum module", () => {
  test("adds 1 + 2 to equal 3", () => {
    expect(sum(1, 2)).toBe(3);
  });
});

To make your import work and avoid other issues, like modules not working in Node.js, just note that:

With ES6 modules you can not yet import directories. Your import should look like this:

import fs from './../node_modules/file-system/file-system.js'

The documentation is confusing. I use Node.js to perform some local task in my computer.

Let's suppose my old script was test.js. Within it, if I want to use

import something from "./mylocalECMAmodule";

it will throw an error like this:

(node:16012) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
SyntaxError: Cannot use import statement outside a module
...

This is not a module error, but a Node.js error. Forbid loading anything outside a 'module'.

To fix this, just rename your old script test.js into test.mjs.

That's all.

For people coming to this question due to this error in Netlify functions even after adding "type": "module" in the package.json file, update your netlify.toml file to use 'esbuild'. Since esbuild supports ES6, it would work.

[functions]
  node_bundler = "esbuild"

Reference: Get started with functions

Just add --presets '@babel/preset-env'.

For example,

babel-node --trace-deprecation --presets '@babel/preset-env' ./yourscript.js

Or

in babel.config.js

module.exports = {
  presets: ['@babel/preset-env'],
};

In case you're running nodemon for the Node.js version 12, use this command.

server.js is the "main" inside package.json file, replace it with the relevant file inside your package.json file:

nodemon --experimental-modules server.js

Wrong MIME-Type for JavaScript Module Files

The common source of the problem is the MIME-type for "Module" type JavaScript files is not recognized as a "module" type by the server, the client, or the ECMAScript engine that process or deliver these files.

The problem is the developers of Module JavaScript files incorrectly associated Modules with a new ".mjs" (.js) extension, but then assigned it a MIME-type server type of "text/javascript". This means both .js and .mjs types are the same. In fact the new type for .js JavaScript files has also changed to "application/javascript", further confusing the issue. So Module JavaScript files are not being recognized by any of these systems, regardless of Node.js or Babel file processing systems in development.

The main problem is this new "module" subtype of JavaScript is yet known to most servers or clients (modern HTML5 browsers). In other words, they have no way to know what a Module file type truly is apart from a JavaScript type!

So, you get the response you posted, where the JavaScript engine is saying it needs to know if the file is a Module type of JavaScript file.

The only solution, for server or client, is to change your server or browser to deliver a new Mime-type that trigger ES6 support of Module files, which have an .mjs extension. Right now, the only way to do that is to either create a HTTP content-type on the server of "module" for any file with a .mjs extension and change your file extension on module JavaScript files to ".mjs", or have an HTML script tag with type="module" added to any external <script> element you use that downloads your external .js JavaScript module file.

Once you fool the browser or JavaScript engines into accepting the new Module file type, they will start doing their scripting circus tricks in the JS engines or Node.js systems you use.

I recently had the issue. The fix which worked for me was to add this to file babel.config.json in the plugins section:

["@babel/plugin-transform-modules-commonjs", {
    "allowTopLevelThis": true,
    "loose": true,
    "lazy": true
  }],

I had some imported module with // and the error "cannot use import outside a module".

If you are using Node.js, you should refer to this document. Just set up Babel in your Node.js application. It will work, and it worked for me.

npm install --save-dev @babel/cli @babel/core @babel/preset-env

In my case, I used the swc command to transpile, and the problem was the .swcrc file missing. Due to the lack of this file, it was not being transpiled and that is why there is an error.

My solution:

• Transpile command on package.json "dist": "swc src -d dist --source-maps --copy-files",

• .swcrc config file:

{
    "jsc": {
      "parser": {
        "syntax": "typescript",
        "tsx": false,
        "dynamicImport": true,
        "decorators": true
      },
      "transform": {
        "legacyDecorator": true,
        "decoratorMetadata": true
      },
      "target": "es2020",
      "externalHelpers": false,
      "keepClassNames": true,
      "loose": false,
      "minify": {
        "compress": false,
        "mangle": false
      },
      "baseUrl": "src",
      "paths": {
        "@/*": ["*"]
      }
    },
    "module": {
      "type": "commonjs"
    }
  }

It depends on what you are using. if you are using as ECMAScript, then modify your package.json as following

"scripts": {
    "test": "NODE_OPTIONS='--experimental-vm-modules' jest"
}

your simple test file

import {sum} from '../../js/lib.js'

describe("Socket Test", () => {
  it('getState function test', () => {
    console.log('this is a test...');
  });
});

your simple function that you want to test

export function sum(a, b) {
  return a + b
}

then run

npm run test

voila!

1. I had the same problem when I started to use Babel... But later, I had a solution... I haven't had the problem any more so far... Currently, Node.js v12.14.1, "@babel/node": "^7.8.4", I use babel-node and nodemon to execute (Node.js is fine as well..)
2. package.json: "start": "nodemon --exec babel-node server.js "debug": "babel-node debug server.js"!! Note: server.js is my entry file, and you can use yours.
3. launch.json. When you debug, you also need to configure your launch.json file "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/babel-node"!! Note: plus runtimeExecutable into the configuration.
4. Of course, with babel-node, you also normally need and edit another file, such as the babel.config.js/.babelrc file