SyntaxError: Unexpected token import - Express

Question

I have this in my index.js

import express from 'express'
import data from './data/data'


const app = express();
const PORT = 3000; 

app.listen(PORT, () =>
    console.log(`Your server is running on ${PORT}`)
);

This is my package.json

{
    "name": "express-app",
    "version": "1.0.0",
    "description": "backend provisioning",
    "main": "app.js",
    "scripts": {
        "start": "nodemon ./index.js --exec babel-node -e js"
    },
    "author": "B",
    "license": "ISC",
    "devDependencies": {
        "babel-cli": "^6.26.0",
        "babel-preset-env": "^1.6.1",
        "babel-preset-stage-0": "^6.24.1"
    },
    "dependencies": {
        "express": "^4.16.3"
    }
}

When I run nodemon , I got

[nodemon] 1.17.3
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: *.*
[nodemon] starting `node index.js`
/Users/b/Desktop/express-app/index.js:1
(function (exports, require, module, __filename, __dirname) { import express from 'express'
                                                            ^^^^^^

SyntaxError: Unexpected token import
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:607:28)
    at Object.Module._extensions..js (module.js:654:10)
    at Module.load (module.js:556:32)
    at tryModuleLoad (module.js:499:12)
    at Function.Module._load (module.js:491:3)
    at Function.Module.runMain (module.js:684:10)
    at startup (bootstrap_node.js:187:16)
    at bootstrap_node.js:608:3
[nodemon] app crashed - waiting for file changes before starting...

Did I forget to do anything to be able to use the import command?

I did this :

npm install --save-dev babel-cli babel-preset-env babel-preset-stage-0
npm install express
nodemon

same result

I also try this

rm -rf node_modules/
npm install
nodemon

same result

---

.babelrc

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

Answer 1

NodeJS supports import natively only experimentally, and only if your script has the .mjs extension.

That's why the start in your package.json is referring to babel-node, which transpiles ES6 code into classic JS on-the-fly before running it. But I doubt even that command will work, because you're not passing any presets to babel to run the script. Try this command:

nodemon --exec babel-node --presets env index.js

[OR]

Rename your file to have .mjs extension, then run this:

nodemon --experimental-modules index.mjs

Answer 2

This happens if you have lower version of node. please upgrade it to at least v10.0

Answer 3

I just want to give a overview who came to this situation, becouse its very painfull. Firstly in ES6 there is no support for import Express or require express together and inspite of this we can implement it with esm or dynamic-babel

What is reason, James explained in here Update on ES6

and the reason Node.js, TC-39, and Modules

In my case i have using import and require in the same project and also i need to debugging and hot-reloading features, i have assaulted with this error and figureout a way. first i decide to use nodemon to debugging and hot reloading in my package.json like below:

"debug-api": "nodemon --inspect -r esm src/api/server/index.js",
"debug-store": "nodemon --inspect -r esm dist/store/server/index.js",
"debug": "concurrently npm:debug-*" // if you add --source-maps to here it will make HMR

i have deleted .babelrc file and i have defined loaders on just one place in the webpack like below

            use: {
                loader: 'babel-loader',
                options: {
                    presets: ["@babel/react", ["@babel/preset-env", {
                        "useBuiltIns": "usage",
                        "shippedProposals": true,
                        "debug": true,
                        "include": ["es7.promise.finally", "es7.symbol.async-iterator", "es6.array.sort"],
                        "modules": false,     
                      }]
                    ],
                    plugins: [
                        ["@babel/plugin-transform-regenerator", {
                            "asyncGenerators": true,
                            "generators": true,
                            "async": true
                          }],
                            [
                                "@babel/plugin-transform-runtime",
                                {
                                  "corejs": false,
                                  "helpers": true,
                                  "regenerator": true,
                                  "useESModules": true
                                }
                              ],
                              "@babel/plugin-proposal-class-properties",
                              "@babel/plugin-syntax-dynamic-import",
                              "@babel/plugin-syntax-object-rest-spread",
                              "react-hot-loader/babel"]
                }
            }
        },

And at the and i can pick-up process from vscode debugging console, launch.json like below

    {
      "type": "node",
      "request": "attach",
      "name": "Node: Nodemon",
      "processId": "${command:PickProcess}",
      "restart": true,
      "protocol": "inspector",
  },

Now it has been working with debugging and hotreloading, if there is a overlooked problem or feature please comment

Answer 4

use require instead of import. this might help for example : write this :

const express =  require('express')

instead of:

import express from 'express'

Answer 5

it's better to use

const express = require('express');

instead of

import express from 'express';