SyntaxError: Unexpected token import - Express

Ask Time：2018-04-14T00:19:03 Author：code-8

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"
    ]
}

Author:code-8，eproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article：https://stackoverflow.com/questions/49821334/syntaxerror-unexpected-token-import-express

Hamit YILDIRIM :

I just want to give a overview who came to this situation, becouse its very painfull.\nFirstly 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\n\nWhat is reason, James explained in here Update on ES6\n\nand the reason Node.js, TC-39, and Modules\n\nIn 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. \nfirst i decide to use nodemon to debugging and hot reloading in my package.json\nlike below:\n\n\"debug-api\": \"nodemon --inspect -r esm src/api/server/index.js\",\n\"debug-store\": \"nodemon --inspect -r esm dist/store/server/index.js\",\n\"debug\": \"concurrently npm:debug-*\" // if you add --source-maps to here it will make HMR\n\n\ni have deleted .babelrc file and i have defined loaders on just one place in the webpack like below\n\n use: {\n loader: 'babel-loader',\n options: {\n presets: [\"@babel/react\", [\"@babel/preset-env\", {\n \"useBuiltIns\": \"usage\",\n \"shippedProposals\": true,\n \"debug\": true,\n \"include\": [\"es7.promise.finally\", \"es7.symbol.async-iterator\", \"es6.array.sort\"],\n \"modules\": false, \n }]\n ],\n plugins: [\n [\"@babel/plugin-transform-regenerator\", {\n \"asyncGenerators\": true,\n \"generators\": true,\n \"async\": true\n }],\n [\n \"@babel/plugin-transform-runtime\",\n {\n \"corejs\": false,\n \"helpers\": true,\n \"regenerator\": true,\n \"useESModules\": true\n }\n ],\n \"@babel/plugin-proposal-class-properties\",\n \"@babel/plugin-syntax-dynamic-import\",\n \"@babel/plugin-syntax-object-rest-spread\",\n \"react-hot-loader/babel\"]\n }\n }\n },\n\n\nAnd at the and i can pick-up process from vscode debugging console, launch.json like below\n\n {\n \"type\": \"node\",\n \"request\": \"attach\",\n \"name\": \"Node: Nodemon\",\n \"processId\": \"${command:PickProcess}\",\n \"restart\": true,\n \"protocol\": \"inspector\",\n },\n\n\nNow it has been working with debugging and hotreloading, if there is a overlooked problem or feature please comment",

2019-01-12T22:51:14

Shabbir Ahmed :

use require instead of import. this might help\nfor example :\nwrite this :\n\nconst express = require('express')\n\n\ninstead of:\n\nimport express from 'express'\n",

2019-12-10T17:18:51

Vasan :

NodeJS supports import natively only experimentally, and only if your script has the .mjs extension.\n\nThat'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:\n\nnodemon --exec babel-node --presets env index.js\n\n[OR]\n\nRename your file to have .mjs extension, then run this:\n\nnodemon --experimental-modules index.mjs",

2018-04-13T17:27:41

ritesh :

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

2020-01-07T04:47:58

SyntaxError: Unexpected token import - Express