Jose Ospina Jose Ospina -4 years ago 255
Node.js Question

App wont run after vue `init`

After a brand new installation of NodeJS and vue-cli in an Ubuntu machine, I create a Vue app with

vue init webpack-simple frontend


then cd into
frontend
and run

npm install


which downloads a lot of dependencies.

I then run
npm run dev


but get an error with the
css-loader
dependency

> frontend@1.0.0 dev /home/pepo/workspace/jiemaps/frontend
> cross-env NODE_ENV=development webpack-dev-server --open --hot

Project is running at http://localhost:8080/
webpack output is served from /dist/
404s will fallback to /index.html
loaderUtils.parseQuery() received a non-string value which can be problematic, see https://github.com/webpack/loader-utils/issues/56
parseQuery() will be replaced with getOptions() in the next major version of loader-utils.
Hash: 1fe5ee39c7e45c04fc58
Version: webpack 2.3.1
Time: 2039ms
Asset Size Chunks Chunk Names
logo.png?82b9c7a5a3f405032b1db71a25f67021 6.85 kB [emitted]
build.js 1.58 MB 0 [emitted] [big] main
chunk {0} build.js (main) 565 kB [entry] [rendered]
[36] ./~/vue/dist/vue.esm.js 244 kB {0} [built]
[38] (webpack)/hot/emitter.js 77 bytes {0} [built]
[39] ./src/main.js 134 bytes {0} [built]
[40] (webpack)-dev-server/client?http://localhost:8080 5.44 kB {0} [built]
[41] (webpack)/hot/dev-server.js 1.57 kB {0} [built]
[43] ./~/ansi-regex/index.js 135 bytes {0} [built]
[52] ./~/punycode/punycode.js 14.7 kB {0} [built]
[58] ./~/sockjs-client/lib/entry.js 244 bytes {0} [built]
[84] ./~/strip-ansi/index.js 161 bytes {0} [built]
[86] ./~/url/url.js 23.3 kB {0} [built]
[88] ./src/App.vue 1.53 kB {0} [built]
[94] (webpack)-dev-server/client/overlay.js 3.6 kB {0} [built]
[95] (webpack)-dev-server/client/socket.js 856 bytes {0} [built]
[97] (webpack)/hot/log-apply-result.js 1.02 kB {0} [built]
[98] multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js 52 bytes {0} [built]
+ 84 hidden modules

ERROR in ./~/css-loader?sourceMap!./~/vue-loader/lib/style-compiler?{"id":"data-v-25441132","scoped":false,"hasInlineConfig":false}!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue
Module build failed: SyntaxError: Unexpected token {
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:404:25)
at Object.Module._extensions..js (module.js:432:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:311:12)
at Module.require (module.js:366:17)
at require (module.js:385:17)
at loadLoader (/home/pepo/workspace/jiemaps/frontend/node_modules/loader-runner/lib/loadLoader.js:13:17)
at iteratePitchingLoaders (/home/pepo/workspace/jiemaps/frontend/node_modules/loader-runner/lib/LoaderRunner.js:169:2)
at iteratePitchingLoaders (/home/pepo/workspace/jiemaps/frontend/node_modules/loader-runner/lib/LoaderRunner.js:165:10)
@ ./~/vue-style-loader!./~/css-loader?sourceMap!./~/vue-loader/lib/style-compiler?{"id":"data-v-25441132","scoped":false,"hasInlineConfig":false}!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue 4:14-272 13:3-17:5 14:22-280
@ ./src/App.vue
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

Answer Source

Upgrading to node7 fixed this problem for me.

https://github.com/vuejs/vue-loader/issues/728

my node and vue version:

$ vue -V
> 2.8.1

$ node -v
> v6.10.1

$ npm -v
> 3.10.10
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download