ES6 is not recognized - NodeJS and WebStorm

Question

I've been googling and searching everywhere and couldn't find an answer.

I'm just a little familiar with Typescript. Started working on my GraphQL NodeJS server and wanted to use Typescript for safer and easier coding.

The first thing needed to be done is set the current JS version to ES6 and so I did.

In addition I set my tsconfig that way:

{
"compilerOptions": {
    "module": "es6",
    "target": "es6",
    "noImplicitAny": false,
    "outDir": "./build",
    "sourceMap": true
},
"exclude": [
    "node_modules"
]

}

my index.js

import * as express from 'express';
import * as graphqlHTTP from 'express-graphql';
import {Schema} from './src/schema/Schema';

const PORT = 3000;

const app = express();

const graphqlOption: graphqlHTTP.OptionsObj = {
  schema: new Schema().getSchema(),
  pretty: true,
  graphiql: true
};

app.use('/graphql', graphqlHTTP(graphqlOption));

app.listen(PORT, ()=> {
  console.log("listening on PORT 3000");
});

When running this I'm getting

SyntaxError: unexpected token import

also, when hovering the const graphqlOption: graphqlHTTP.OptionsObj I get

Types are not supported by the current JavaScript version

Please help, what am i doing wrong?

Thanks in advance.

EDIT:

Wanted it to be clear that when I'm using a simple var express = require('express') I do not get this unexpected token and it moves to the next line

SCREENSHOTS:

http://stackoverflow.com/questions/36901147/node-v6-0-0-and-use-of-es6-import-for-module-bundling-is-not-working-with-with — Jaromanda X, Aug 24 '16 at 12:30
Have you read the accepted answer on that link? it explains `SyntaxError: unexpected token import` — Jaromanda X, Aug 24 '16 at 12:39
I cant seem to understand what are these 'harmony modules', but anyways they're saying that the import is 'not yet implemented' by those modules, so how am i supposed to be using it? — Kesem David, Aug 24 '16 at 12:46
in nodejs ... you can't (harmony is some wank term for es6 or future javascript where all browsers are in "harmony" or some such twaddle :p ) — Jaromanda X, Aug 24 '16 at 12:47
I am confused by your statement since in my office we work with nodejs and webstorm, and have already ran code using `import`, i was absolutely convinced ive configured somthing wrong in my setting or the tsconfig.. and btw thank for the 'harmony' explanation hehe — Kesem David, Aug 24 '16 at 12:54
Sorry if I've misled you, Kasem, I can only go by the facts. 1. you get an error stating that `import` is an unexpected token, and 2. there's an accepted answer to a similar question that states "modules are not supported in nodejs" — Jaromanda X, Aug 24 '16 at 12:58
Can you please show actual screenshots (of your settings as well as actual error messages). There is slight chance that you have set it in wrong place (e.g. "Default Settings" that affects future new projects only) .. or this error comes from JSHint etc (which may not support this syntax etc). — LazyOne, Aug 24 '16 at 13:48
@LazyOne added a screenshot, thanks for the reply, feeling a bit lost — Kesem David, Aug 24 '16 at 14:04
So far this is not a WebStorm error (as error happens during actual execution by node). Maybe it needs to be somehow transpilled first? (sorry, not a JS person at all so cannot really help here) — LazyOne, Aug 24 '16 at 14:13
@KesemDavid: Node.js currently does not support many es6 features. And yes, "import" is one of the things node does not support. The code you're working on at work probably goes through an es6 to es5 compiler like babel. — slebetman, Aug 24 '16 at 14:14
@LazyOne To transpile the code i am using typescript. But from what i understand the import syntax isn't a problem of typescript but a problem with the ES6 itself. am I right? — Kesem David, Aug 24 '16 at 14:16
@slebetman we don't use babel but only Typescript, which im also using here. maybe im mistaken for thinking this is the node problem while its a problem with my transpiling? — Kesem David, Aug 24 '16 at 14:17
Yes, if Typescript can compile to es5 then compiling to es6 is a mistake. Currently there is ZERO javascript interpreters that support all of es6. People are either picky about using only supported features like arrow functions or they use an es5 to 6 compiler. — slebetman, Aug 24 '16 at 14:22
@slebetman you're talking about the `target` field on `tsconfig.json` i guess right? — Kesem David, Aug 24 '16 at 14:31

score 5 · Answer 1 · answered Aug 24 '16 at 12:37

5

Go to:

File -> Settings -> Languages -> JavaScript

And enable ES6.

answered Aug 24 '16 at 12:37

Vad

3,708
2
23
33

2

As ive mentioned in my question. that was the first thing ive done: changed the JavaScript version to ES6 – Kesem David Aug 24 '16 at 12:39

score 3 · Answer 2 · answered Aug 24 '16 at 15:22

3

The problem is not with WebStorm or NodeJS, it is that you are not transpiling the ES6 module declarations into their ES5 CommonJS equivalent, so when you run the output you are getting an error as no version of Node implements ES6 modules.

Update your tsconfig.json:

"compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    ...
}

answered Aug 24 '16 at 15:22

sdgluck

18,456
4
56
83

Optionally `"target"` can be set to `"es6"`. – Martin Aug 24 '16 at 15:25

score 2 · Accepted Answer · answered Aug 25 '16 at 09:30

Thanks for all the help, eventually I've found the problem. If you'll look carefully enough you'll notice i do not have an index.ts and what I was trying to do by mistake is to run the index.js with Typescript syntax in it.

I've renamed it to index.ts, used tsc to create the build directory again and then ran the index.js created there, everything works.

Thanks for all the comments.

ES6 is not recognized - NodeJS and WebStorm

EDIT:

SCREENSHOTS:

3 Answers3