Webpack: ES2015 not transpiled before build when using Node ^6.0.0

[ErickPetru]

I was trying the following in my enviroment updated to Node 6.1.0 on Windows 10 x64:

npm install -g vue-cli
vue init webpack sample
cd sample
npm install
npm run dev

The fresh project already started without working, with browser console logging the error Uncaught SyntaxError: Unexpected token import since the first access to http://localhost:8080. After a lot of research, a forum post and much talk in Gitter, we started suspecting something about _Node ^6.0.0_ and the way it keeps deep dependencies updated.

So I went to nvm install 4.4.4 and npm use 4.4.4 and recreated a project. Everything worked well! Then I repeated the steps after nvm install 5.11.1 and nvm use 5.11.1. Everything worked like a charm again!

But going back to nvm use 6.0.0 or nvm use 6.1.0 and the _SyntaxError_ returned as soon as the first import Vue from 'vue' statement starts in main.js.

It seems that this webpack template have problems with _Node ^6.0.0_ running on Windows 10 x64, something with Babel not transpiling JavaScript files before the Webpack build starts. _I believe it's Windows plataform specific, since other users on Gitter using other plataforms reported everything was working as expected with the latest Node version too._

[Async0x42]

I'm running on Windows 10 x64 also, and the issue appears randomly. Sometimes I can close all windows, run the command again and it works. Other times I've deleted and reinstalled all node modules and it works.

Quite often I'm able to run without any issues though. (Haven't tried pre-6.0)

[chrisvfritz]

Some dependencies still don't seem compatible with node v6. I would recommend sticking with node v4 or v5 until they have a bit more time to update.

[vtrrsl]

Using Node 6.2.1 on OS X, adding this to .eslintrc solves my problem after getting Parsing error: The keyword 'import' is reserved on npm run dev

'parserOptions': {
  'sourceType': 'module'
},

[chrisvfritz]

Thanks @vtrrsl! 😄 @ErickPetru @Async0x42 Can either of you confirm whether adding that to .eslintrc.js fixes the issue on Windows x64?

[Async0x42]

The issue was sporadic before, but I haven't encountered the problem since making that change to .eslintrc and using Node 6.2.1 on Win10 x64

[ErickPetru]

@chrisvfritz, good news: everything running very well now with Node 6.2.1 on Windows 10 x64 Build 14361 and the suggested lines at .eslintrc.js. It seems to be a good solution for now.

[vtrrsl]

Great, I'm glad that it seems to work.

[chrisvfritz]

Fixed in https://github.com/vuejs-templates/webpack/commit/a20a796f4c9733d3379ecab9301a154fcc6820d2. Thanks for the troubleshooting and feedback everyone!

[Vasiliy-Bondarenko]

I'm getting same error again on clean install with different node versions.
"Uncaught SyntaxError: Unexpected token import"

node v6.2.1 / npm 3.9.3
OS X 10.11.6

vue init webpack _clean
cd _clean
npm install
npm run dev

installed new node...
node v6.8.1 / npm 3.10.8

rm -rf node_modules
npm install
npm run dev

same issue again...

nvm use 5.11.1
Now using node v5.11.1 (npm v3.8.6)
rm -rf node_modules
npm install
npm run dev

no luck. same issue again...
looks like issue is somewhere else... i can not even guess where it can be... :)

---

install config:
? Project name clean_complete
? Project description A Vue.js project
? Author Vasiliy Bondarenko [email protected]
? Vue build standalone
? Use ESLint to lint your code? No
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? No

also i've tried installing with ESLint=Yes - with the same result...

[Vasiliy-Bondarenko]

i've found the issue.
it goes from here: https://github.com/vuejs/vue-loader/blob/70ca3ff64c1ae69bb4b93a142e937fccd2f06c89/lib/loader.js#L62

i have front-end project directory inside directory with bigger project which had buble installed. so vue-loader tried to use buble, while it was not properly configured to transpile files.

npm lookes for required packages in the parent folders - so it found buble and tried to use it.
when i deleted buble from upper node_modules folder vue-loader started to work as expected.

it took many hours to find it. i think it's better to include configuration for buble in this package or reverse the check in vue-loader and use properly configured babel by default.

[chrisvfritz]

@Vasiliy-Bondarenko Unfortunately, I think that project structure is just inherently problematic. It's quite common for modules to try to detect the presence of optional dependencies, so this likely won't be the last issue it causes. If you're using buble for the backend, I recommend having side-by-side frontend and backend directories, which each have their own package.json. This way, they can't interfere with each other.

[markusha]

Same problem here.

System: Windows 7 x64
node --version: 6.3.1
npm --version: 3.10.6
vue --version: 2.4.0

vue init webpack my-project
Vue build standalone
Use ESLint to lint your code? No
Setup unit tests with Karma + Mocha? No
Setup e2e tests with Nightwatch? No
cd my-project
npm install
npm run dev

Result in browser: Uncaught SyntaxError: Unexpected token import.
Always reproducible. And I don't have any node_modules in any ancestor directories of my-project.

[DonBroughton]

This is still an issue and should be re-opened as an active bug.

[chrisvfritz]

@markusha @Continuum81 The issue originally reported here has been fixed. It sounds like you're both seeing a separate, but similar issue. I can't reproduce this unfortunately, so I think you'll have to do a little more investigating to figure out when exactly it's happening. For example, does it still happen when:

• Using a different operating system?
• Using an older or newer version of Node?
• Choosing different options during project generation?

I've personally confirmed it works on Windows 10, with Node 4, 5, 6, and 7, and several different configurations.

[leocflam]

@chrisvfritz @Vasiliy-Bondarenko

Yes I have the same issue too.

The initial installation of vue-cli is just fine.
But when I put it inside Laravel project sharing the same Package JSON and node modules,
(Laravel's Elixir uses buble)

import is then unexpected when I compile in vue-cli (while compiling in Elixir is fine)

When I go to node modules and remove all buble folders,
it works again.

Is there really no chance vue-cli share the same package.json with other compilation framework?
I'm really into a scenario where they should share the same directory and config

[leocflam]

My temporary fix is to go to vue-loader/libs/loader.js

and comment out

var hasBuble = false
// try {
// hasBuble = !!require('buble-loader')
// } catch (e) {}

to make it never try to find buble
so both Elixir and Vue-cli can compile in babel.