[javascript] Node.js - SyntaxError: Unexpected token import

I don't understand what is wrong. Node v5.6.0 NPM v3.10.6

The code:

function (exports, require, module, __filename, __dirname) {
    import express from 'express'
};

The error:

SyntaxError: Unexpected token import
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:387:25)
    at Object.Module._extensions..js (module.js:422:10)
    at Module.load (module.js:357:32)
    at Function.Module._load (module.js:314:12)
    at Function.Module.runMain (module.js:447:10)
    at startup (node.js:140:18)
    at node.js:1001:3

When I was started with express always wanted a solution to use import instead require

const express = require("express");
// to 
import express from "express"

Many time go through this line:- Unfortunately, Node.js doesn't support ES6's import yet.

Now to help other I create new two solutions here

1) esm:-

The brilliantly simple, babel-less, bundle-less ECMAScript module loader. let's make it work

  yarn add esm / npm install esm

create start.js or use your namespace

 require = require("esm")(module/*, options*/)
 // Import the rest of our application.
 module.exports = require('./src/server.js')
 // where server.js is express server start file

Change in your package.josn pass path of start.js

  "scripts": {
    "start": "node start.js",
    "start:dev": "nodemon start.js",
  },
  "dependencies": {
+    "esm": "^3.2.25",
  },
  "devDependencies": {
+   "nodemon": "^1.19.2"
  }

2) Babel js:-

This can be divide into 2 part

a) Solution 1 thanks to timonweb.com

b) Solution 2

use Babel 6 (older version of babel-preset-stage-3 ^6.0) create .babelrc file at your root folder

{
    "presets": ["env", "stage-3"]
}

Install babel-preset-stage-3

yarn add babel-cli babel-polyfill babel-preset-env bable-preset-stage-3 nodemon --dev

Change in package.json

"scripts": {
+   "start:dev": "nodemon --exec babel-node -- ./src/index.js",
+   "start": "npm run build && node ./build/index.js",
+   "build": "npm run clean && babel src -d build -s --source-maps --copy-files",
+   "clean": "rm -rf build && mkdir build"
},
"devDependencies": {
+    "babel-cli": "^6.26.0",
+    "babel-polyfill": "^6.26.0",
+    "babel-preset-env": "^1.7.0",
+    "babel-preset-stage-3": "^6.24.1",
+    "nodemon": "^1.19.4"
},

Start your server

yarn start / npm start

Oooh no we create new problem

regeneratorRuntime.mark(function _callee(email, password) {
^
ReferenceError: regeneratorRuntime is not defined

This error only come when you use async/await in your code. Then use polyfill that includes a custom regenerator runtime and core-js. add on top of index.js

import "babel-polyfill"

This allow you to use async/await

use Babel 7

Need to upto date every thing in your project let start with babel 7 .babelrc

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

Some change in package.json

"scripts": {
+  "start:dev": "nodemon --exec babel-node -- ./src/index.js",
+  "start": "npm run build && node ./build/index.js",
+  "build": "npm run clean && babel src -d build -s --source-maps --copy-files",
+  "clean": "rm -rf build && mkdir build",
    ....
}
"devDependencies": {
+   "@babel/cli": "^7.0.0",
+   "@babel/core": "^7.6.4",
+   "@babel/node": "^7.0.0",
+   "@babel/polyfill": "^7.0.0",
+   "@babel/preset-env": "^7.0.0",
+   "nodemon": "^1.19.4"
....
}

and use import "@babel/polyfill" on start point

import "@babel/polyfill"
import express from 'express'
const app = express()

//GET request
app.get('/', async (req, res) {
  // await operation
  res.send('hello world')
})
app.listen(4000, () => console.log(' Server listening on port 400!'))

Are you thinking why start:dev

Seriously. It is good question if you are new. Every change you are boar with start server every time then use yarn start:dev as development server every change restart server automatically for more on nodemon

As of Node.js v12 (and this is probably fairly stable now, but still marked "experimental"), you have a couple of options for using ESM (ECMAScript Modules) in Node.js (for files, there's a third way for evaling strings), here's what the documentation says:

The --experimental-modules flag can be used to enable support for ECMAScript modules (ES modules).

Once enabled, Node.js will treat the following as ES modules when passed to node as the initial input, or when referenced by import statements within ES module code:

• Files ending in .mjs.

• Files ending in .js, or extensionless files, when the nearest parent package.json file contains a top-level field "type" with a value of "module".

• Strings passed in as an argument to --eval or --print, or piped to node via STDIN, with the flag --input-type=module.

Node.js will treat as CommonJS all other forms of input, such as .js files where the nearest parent package.json file contains no top-level "type" field, or string input without the flag --input-type. This behavior is to preserve backward compatibility. However, now that Node.js supports both CommonJS and ES modules, it is best to be explicit whenever possible. Node.js will treat the following as CommonJS when passed to node as the initial input, or when referenced by import statements within ES module code:

• Files ending in .cjs.

• Files ending in .js, or extensionless files, when the nearest parent package.json file contains a top-level field "type" with a value of "commonjs".

• Strings passed in as an argument to --eval or --print, or piped to node via STDIN, with the flag --input-type=commonjs.

Unfortunately, Node.js doesn't support ES6's import yet.

To accomplish what you're trying to do (import the Express module), this code should suffice

var express = require("express");

Also, be sure you have Express installed by running

$ npm install express

See the Node.js Docs for more information about learning Node.js.

I often use a github starter project, like this (it uses babel)

My project uses node v10.21.0, which still does not support ES6 import keyword. There are multiple ways to make node recognize import, one of them is to start node with node --experimental-modules index.mjs (The mjs extension is already covered in one of the answers here). But, this way, you will not be able to use node specific keyword like require in your code. If there is need to use both nodejs's require keyword along with ES6's import, then the way out is to use the esm npm package. After adding esm package as a dependency, node needs to be started with a special configuration like: node -r esm index.js

In my case it was looking after .babelrc file, and it should contain something like this:

{
  "presets": ["es2015-node5", "stage-3"],
  "plugins": []
}

As mentioned in other answers Node JS currently doesn't support ES6 imports.

(As of now, read EDIT 2)

Enable ES6 imports in node js provides a solution to this issue. I have tried this and it worked for me.

Run the command:

    npm install babel-register babel-preset-env --save-dev

Now you need to create a new file (config.js) and add the following code to it.

    require('babel-register')({
        presets: [ 'env' ]
    })
    // Import the rest of our application.
    module.exports = require('./your_server_file.js')

Now you can write import statements without getting any errors.

Hope this helps.

EDIT:

You need to run the new file which you created with above code. In my case it was config.js. So I have to run:

    node config.js

EDIT 2:

While experimenting, I found one easy solution to this issue.

Create .babelrc file in the root of your project.

Add following (and any other babel presets you need, can be added in this file):

    {
        "presets": ["env"]
    }

Install babel-preset-env using command npm install babel-preset-env --save, and then install babel-cli using command npm install babel-cli -g --save

Now, go to the folder where your server or index file exists and run using: babel-node fileName.js

Or you can run using npm start by adding following code to your package.json file:

    "scripts": {
        "start": "babel-node src/index.js"
    }

I'm shocked esm hasn't been mentioned. This small, but mighty package allows you to use either import or require.

Install esm in your project

$ npm install --save esm

Update your Node Start Script to use esm

node -r esm app.js

esm just works. I wasted a TON of time with .mjs and --experimental-modules only to find out a .mjs file cannot import a file that uses require or module.exports. This was a huge problem, whereas esm allows you to mix and match and it just figures it out... esm just works.

Error: SyntaxError: Unexpected token import or SyntaxError: Unexpected token export

Solution: Change all your imports as example

const express               = require('express');
const webpack               = require('webpack');
const path                  = require('path');
const config                = require('../webpack.config.dev');
const open                  = require('open');

And also change your export default = foo; to module.exports = foo;

In case that you still can't use "import" here is how I handled it: Just translate it to a node friendly require. Example:

import { parse } from 'node-html-parser';

Is the same as:

const parse = require('node-html-parser').parse;

I've been trying to get this working. Here's what works:

1. Use a recent node version. I'm using v14.15.5. Verify your version by running: node --version
2. Name the files so that they all end with .mjs rather than .js

Example:

mod.mjs

export const STR = 'Hello World'

test.mjs

import {STR} from './mod.mjs'
console.log(STR)

Run: node test.mjs

You should see "Hello World".

Simply install a higher version of Node. As till Node v10 es6 is not supported. You need to disable a few flags or use

babel 7 proposal can you add dev dependencies

npm i -D @babel/core @babel/preset-env @babel/register

and add a .babelrc in the root

{
"presets": [
  [
    "@babel/preset-env",
    {
      "targets": {
        "node": "current"
     }
    }
  ]
 ]
}

and add to the .js file

require("@babel/register")

or if you run it in the cli, you could use the require hook as -r @babel/register, ex.

$node -r @babel/register executeMyFileWithESModules.js

I'm going to address another problem within the original question that no one else has. After recently converting from CommonJS to ESM in my own NodeJS project, I've seen very little discussion about the fact that you cannot place imports wherever you want, like you could with require. My project is working great with imports now, but when I use the code in the question, I first get an error for not having a named function. After naming the function, I receive the following...

import express from 'express'
       ^^^^^^^

SyntaxError: Unexpected identifier
    at Loader.moduleStrategy (internal/modules/esm/translators.js:88:18)

You cannot place imports inside functions like you could require. They have to be placed at the top of the file, outside code blocks. I wasted quite a bit of time on this issue myself.

So while all of the above answers are great at helping you get imports to work in your project, none address the fact that the code in the original question cannot work as written.

if you can use 'babel', try to add build scripts in package.json(--presets=es2015) as below. it make to precompile import code to es2015

"build": "babel server --out-dir build --presets=es2015 && webpack"

import statements are supported in the stable release of Node since version 14.x LTS.

All you need to do is specify "type": "module" in package.json.