3

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

enter image description here

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

enter image description here

Update my configure

enter image description here

enter image description here

halfer
  • 19,824
  • 17
  • 99
  • 186
Lê Khánh Vinh
  • 2,591
  • 5
  • 31
  • 77
  • I just changed the Java Script language from ECMA 5 to ECMA 2015 in the WS settings and the error got away. – Jankapunkt May 27 '17 at 05:20
  • Hi I already change to ECMA2015 but still error. I'm running node.js template from exppress.js – Lê Khánh Vinh May 27 '17 at 05:43
  • can i know which node version are you using ? – arvind May 27 '17 at 12:19
  • 1
    “The problem is when running the project i still get the error” – how exactly are you running the project? Do you have a run configuration set up? The error message looks like you're running the original source files with Node.js, not the file generated by Babel – Patrick Hund May 27 '17 at 12:39
  • First update your node version and try to run your application if still error coming then change your webstorm editor settings goto "File->settings->Language and Frameworks->Sachems and DTDs->Node.js and NPM" and change Node interpreter with latest node version which will support ES6. – arvind May 27 '17 at 12:47
  • hi updated my configure. there is no error when typing code. only error when run. i use default configure – Lê Khánh Vinh May 27 '17 at 13:15

2 Answers2

13

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:

enter image description here

lena
  • 90,154
  • 11
  • 145
  • 150
  • Thanks a lot. Work like a charm. Do I need to enable the file watcher to transpile using babel (auto create a dist folder contain transpile file)? Or just the above configuration is enough? – Lê Khánh Vinh May 27 '17 at 22:02
  • adding `-r babel-register` is enough - with this option, code is compiled on-the-fly. But you can also use babel file watcher to pre-compile the files - in such case, you need to make sure to specify the compiled file (and not original one) as a 'javascript file' in your run configuration. When running pre-compiled code, `-r babel-register` should be omitted – lena May 28 '17 at 15:04
0

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.stack.imgur.com/jrj8H.png

Difference between running babel-register vs babel-node

mimetyped
  • 21
  • 3