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')
Tarek Essam
  • 3,602
  • 2
  • 12
  • 21
pingeyeg
  • 632
  • 2
  • 6
  • 23

6 Answers6

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:

Kamafeather
  • 8,663
  • 14
  • 69
  • 99
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"
Vahe Nikoghosyan
  • 429
  • 6
  • 6
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
pingeyeg
  • 632
  • 2
  • 6
  • 23
1

I've created a nodejs boilerplate supporting es6 module.

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

Jason Jin
  • 1,739
  • 14
  • 21
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.

Narasimha Prasanna HN
  • 661
  • 5
  • 14
  • 4
    node 12, which OP says they are using, does support the esm import syntax and does not require babel. – Dan O Sep 14 '19 at 02:56
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.

Jorge Merino
  • 123
  • 7