Configure Babel with WebStorm to use ES6 with WebStorm Node.js project

Question

I'm using WebStorm latest version to work with Node.js (express.js) frame work. I have set my Babel so that I can use ES6 syntax, for example:

import express from "express".

Babel work ok it generate the index.js which contain index.js.map.

The problem is when running the project I still get the error

/usr/local/Cellar/node/7.10.0/bin/node /Volumes/Elements/Learning/Node/Project/NodeWebStorm/bin/www
/Volumes/Elements/Learning/Node/Project/NodeWebStorm/routes/index.js:1
(function (exports, require, module, __filename, __dirname) { import express from "express"
                                                              ^^^^^^
SyntaxError: Unexpected token import
    at createScript (vm.js:53:10)
    at Object.runInThisContext (vm.js:95:10)
    at Module._compile (module.js:543:28)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Volumes/Elements/Learning/Node/Project/NodeWebStorm/app.js:8:13)

Process finished with exit code 1

Here is my project

Here is my index.js which babel generate. Look ok, I even tried to run it alone with no error

'use strict';

var _express = require('express');

var _express2 = _interopRequireDefault(_express);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

// let express = require("express");
var router = _express2.default.Router();

/* GET home page. */
router.get('/', function (req, res, next) {
    // res.render('index', { title: 'Express' });
    res.render('newindex', { title: 'Hey', message: 'Hello there!' });
});

router.get('/about', function (req, res) {
    res.send('what the hell');
});

router.get('/new', function (req, res) {
    res.json({ "test": "new value" });
});

router.get('/new/path', function (req, res) {
    res.send("what the new");
});

router.get('/newpath', function (req, res) {
    res.send('this is new path');
});

router.get('/testpath', function (req, res) {
    res.send('what the hell');
});

module.exports = router;
//# sourceMappingURL=index.js.map

The template is from node.js express template from webstorm. Do I need add any additional step?

Edit

I have also change the language - framework - javascript to ES6 but still error

Update my configure

Answer 1

As an alternative to using the Node.js Run Configuration, you might consider using the npm configuration and use the appropriate script directly. e.g.

In the package.json

"scripts": {
  "start": "babel-node src/index.js"
}

In Webstorm: https://i.sstatic.net/jrj8H.png

Difference between running babel-register vs babel-node

Answer 2

To make things clear: you issue has absolutely nothing to do with WebStorm, error comes from Node.js interpreter that runs your code. Node.js still doesn't support ES6 modules natively (actually, no JavaScript runtime currently supports them - ECMAScript does not define a "Loader" specification which determines how Modules are inserted into the runtime. The Loader spec is being defined by WHATWG, but is not yet finalized). So, to get ES6 imports/exports accepted, you need using transpilers. Current industry standard is Babel

To make things work, try the following:

• install babel in your project using npm install --save-dev babel-cli babel-preset-env

• create a .babelrc file in project root dir:

  { "presets": ["env"] }

• in your Node.js Run configuration, pass -r babel-register to Node: