8

I'm trying to import express into my project using ES6 syntax, but it keeps giving me the error:

import express from "express";
SyntaxError: Unexpected identifier

I have done a bit of research and found where people were saying to add:

"type":"module"

to my package.json file, which I have done:

...
"description": "Shopping list to learn the MERN stack",
  "type": "module",
  "main": "server.js",
  "scripts": {
    "start": "node server.js",
    "server": "nodemon server.js"
  },
...

But I'm still getting the same issue. I would prefer to use the import ES6 syntax rather than this syntax.

const express = require('express')
Improve this question
6
  • What tutorial did you follow to enabled es6 with node? Commented Sep 14, 2019 at 2:39
  • 1
    I've actually gone through several articles trying to figure this one out, but the latest (that I can find) says to use "type":"module" for node 12 in order to enable ES6. Commented Sep 14, 2019 at 2:45
  • 1
    are you running node with the --experimental-modules flag? Commented Sep 14, 2019 at 2:58
  • 1
    What version of Node are you using? Commented Sep 14, 2019 at 2:59
  • 1
    I'm using v12.4.0. I tried the --experiemtal-modules flag, but that didn't seem to work either. I'm still having issues. Commented Sep 14, 2019 at 14:07

6 Answers 6

Reset to default
12

Solution:

For me the best, easiest and most compatible way to resolve (dated to September 2019) was to:

  • npm install esm
  • ensure that the script is run by node with the -r esm option.

Simple as that.

The Node way:

(according to the ECMAScript Modules Documentation)

Other than the "type": "module" property into package.json NodeJS requires the scripts to be run via node --experimental-modules <your_script.js>.

Code into either .mjs or .js extension files will be treated with the support for new ES6. Renaming that I find pretty inconvenient.

Note: "type": "module" is particularly important for supporting .js files. Read the linked documentation.

The solution provided by NodeJS with the --experimental-modules flag didn't work for me in all cases. 🤷‍♂️

Adding the esm packages is more maintainable; and reliable. And can be easily/quickly removed once the ESM support won't be experimental anymore.

Offtopic tip:

If you want to run tests on your ES6 import/export code, I suggest to rely on a solid/flexible framework, like Mocha.

You can follow this instructions to run Mocha tests supporting ES6.

Trying with Jest I wasn't able to run test successfully. Apparently they don't want to directly support the experimental ES6 and suggest to transpile the code (thing that I hate).

References:

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

5

If you try to run Node js app with ES6 syntax, you will encounter this kind of error

SyntaxError: Cannot use import statement outside a module

let's fix that

install three main packages

npm install --save-dev @babel/core @babel/preset-env @babel/node
npm install --save-dev nodemon

add .babelrc file with this

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

and this in package.json

"start": "nodemon --exec babel-node app.js"
Improve this answer

Comments

1

Ok, so, after doing even more research on the ES6 way, this is what worked for me. It's a combination of an answer above and the following:

package.json

node --experimental-modules server.mjs

server.mjs

import dotenv from 'dotenv'
dotenv.config()

const db = process.env.MONGO_URI
Improve this answer

Comments

1

I've created a nodejs boilerplate supporting es6 module.

https://github.com/jasonjin220/es6-express-rest-api-boilerplate

Improve this answer

Comments

0

You need Babel transpiler to do this, as Node.js doesn't support es6.

First add these packages to your project : 

npm install --save-dev babel-cli babel-preset-es2015 rimraf

Then, create a .babelrc file , this is used by Babel transpiler to know some information during transpilation. touch .babelrc Then, add this line to .babelrc :

{
  "presets": ["es2015"]
}

This tells your Babel to use es6 presets as per 2015 standard.

Then, modify the package.json and tell it to use transpiler. 

"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "rimraf dist/ && babel ./ --out-dir dist/ --ignore ./node_modules,./.babelrc,./package.json,./npm-debug.log --copy-files",
"start": "npm run build && node dist/index.js"
 },

You have to add the following to script section, this line tells when you run npm run start , the transpiler will first convert the es6 syntax to minmal JavaScript one, later that is used.

Check your dependencies :

"dependencies": {
"express": "^4.15.2",
"morgan": "^1.8.1",
"rimraf": "^2.6.1"
 }

And Dev dependencies : 

"devDependencies": {
"babel-cli": "^6.24.0",
"babel-preset-es2015": "^6.24.0"
}

This should work, comment if there is any issue.

Improve this answer

1 Comment

node 12, which OP says they are using, does support the esm import syntax and does not require babel.
0

You need to use Babel,

npm install --save-dev @babel/plugin-proposal-class-properties

then for usage create a .babelrc file if you don't have it, with options:

{"plugins": ["@babel/plugin-proposal-class-properties"]}

then ad devDependencies in package.json

"@babel/plugin-proposal-class-properties": "^7.5.5",

that should do the job.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.