ES6: Unexpected token import

Question

While setting up Javascript Dev environment i am getting following error.

I want to use import instead require.

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

I Used babel.

 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:617:28)
    at loader (D:\firstapp\node_modules\babel-register\lib\node.js:144:5)
    at Object.require.extensions.(anonymous function) [as .js] (D:\firstapp\node_modules\babel-register\lib\node.js:154:7)

I tried many solutions from following but, doesn't work or me.

Node error: SyntaxError: Unexpected token import

Node.js - SyntaxError: Unexpected token import

srcServer.js

import express from 'express';
import path from 'path';
import open from 'open';
import webpack from 'webpack';
import config from '../webpack.config.babel.js';

const port = 3000;
const app = express();
const compiler = webpack(config);

app.use(require('webpack-dev-middleware')(compiler, {
  noInfo: true,
  publicPath: config.output.publicPath
}));

app.get('/', function(req, res) {
    res.sendFile(path.join(__dirname, '../src/index.html'));
});

app.listen(port, function(err) {
    if (err) {
        console.log(err);
    } else {
        open('http://localhost:' + port);
    }
});

.babelrc

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

@NurbolAlpysbayev Sorry there is no curly brackets. Removed that — ketan, Oct 17 '18 at 09:05
https://timonweb.com/posts/how-to-enable-es6-imports-in-nodejs/ you're facing issue from step 2 — barbsan, Oct 17 '18 at 09:05
How about this: https://nodejs.org/api/esm.html#esm_ecmascript_modules — jrook, Oct 17 '18 at 09:07

score 1 · Accepted Answer · answered Oct 17 '18 at 09:26

Finally i got the solution. I Created .babelrc file on root folder will following content.

{
    "presets": ["latest"]
}

Then npm install and npm start -s worked for me.

If anyone have issue then, I posted my all files here.

tools/srcServer.js

import express from 'express';
import path from 'path';
import open from 'open';
import webpack from 'webpack';
import config from '../webpack.config.dev.js';

const port = 3000;
const app = express();
const compiler = webpack(config);

app.use(require('webpack-dev-middleware')(compiler, {
  noInfo: true,
  publicPath: config.output.publicPath
}));

app.get('/', function(req, res) {
    res.sendFile(path.join(__dirname, '../src/index.html'));
});

app.listen(port, function(err) {
    if (err) {
        console.log(err);
    } else {
        open('http://localhost:' + port);
    }
});

webpack.config.dev.js

import path from 'path';

export default {
  debug: true,
  devtool: 'inline-source-map',
  noInfo: false,
  entry: [
    path.resolve(__dirname, 'src/index')
  ],
  target: 'web',
  output: {
    path: path.resolve(__dirname, 'src'),
    publicPath: '/',
    filename: 'bundle.js'
  },
  plugins: [],
  module: {
    loaders: [
      {test: /\.js$/, exclude: /node_modules/, loaders: ['babel']},
      {test: /\.css$/, loaders: ['style','css']}
    ]
  }
}

package.json

{
  "name": "firstapp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "npm-run-all --parallel open-src",
    "open-src": "babel-node tools/srcServer.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.17.0",
    "babel-loader": "6.2.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-latest": "^6.16.0",
    "babel-register": "^6.16.3",
    "chai": "3.5.0",
    "chalk": "1.1.3",
    "cheerio": "0.22.0",
    "compression": "^1.7.3",
    "cross-env": "3.1.3",
    "css-loader": "0.25.0",
    "eslint": "3.8.1",
    "eslint-plugin-import": "^2.14.0",
    "eslint-watch": "2.1.14",
    "express": "^4.16.4",
    "extract-text-webpack-plugin": "1.0.1",
    "file-loader": "^2.0.0",
    "html-webpack-plugin": "2.22.0",
    "image-webpack-loader": "^4.3.1",
    "jsdom": "9.8.0",
    "json-schema-faker": "^0.4.7",
    "json-server": "^0.14.0",
    "localtunnel": "^1.9.1",
    "mocha": "3.1.2",
    "nock": "8.1.0",
    "npm-run-all": "3.1.1",
    "nsp": "2.6.2",
    "numeral": "1.5.3",
    "open": "0.0.5",
    "rimraf": "2.5.4",
    "style-loader": "0.13.1",
    "webpack": "1.13.2",
    "webpack-dev-middleware": "1.8.4",
    "webpack-hot-middleware": "2.13.0",
    "webpack-md5-hash": "0.0.5"
  },
  "dependencies": {
    "add": "^2.0.6"
  }
}

You were mixing up babel 6 and babel 7! When you first put in your .babelrc `"presets": ["@babel/preset-env"]` (babel 7!) you were supposed to have installed with `npm install --save-dev @babel/core @babel/preset-env @babel/register`. Now it's working because you are using a babel 6 setup. — axm__, Oct 17 '18 at 09:37

ES6: Unexpected token import

1 Answers1