Webpack: Fresh install throwing error. What am I missing?
Here is the error when I try to build:
ERROR in static/js/app.cd864874e8ee3721eb38.js from UglifyJs
SyntaxError: Unexpected token: name (Vue) [./src/main.js:1,0]
Package.json
{
"name": "whatwhat",
"version": "1.0.0",
"description": "A Vue.js project",
"scripts": {
"dev": "node build/dev-server.js",
"build": "node build/build.js",
"unit": "karma start test/unit/karma.conf.js --single-run",
"e2e": "node test/e2e/runner.js",
"test": "npm run unit && npm run e2e",
"lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
},
"dependencies": {
"vue": "^1.0.21",
"babel-runtime": "^6.0.0"
},
"devDependencies": {
"babel-core": "^6.0.0",
"babel-eslint": "^6.1.2",
"babel-loader": "^6.0.0",
"babel-plugin-transform-runtime": "^6.0.0",
"babel-preset-es2015": "^6.0.0",
"babel-preset-stage-2": "^6.0.0",
"babel-register": "^6.0.0",
"connect-history-api-fallback": "^1.1.0",
"css-loader": "^0.23.0",
"eslint": "^2.10.2",
"eslint-friendly-formatter": "^2.0.5",
"eslint-loader": "^1.3.0",
"eslint-plugin-html": "^1.3.0",
"eslint-config-standard": "^5.1.0",
"eslint-plugin-promise": "^1.0.8",
"eslint-plugin-standard": "^1.3.2",
"eventsource-polyfill": "^0.9.6",
"express": "^4.13.3",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.8.4",
"function-bind": "^1.0.2",
"html-webpack-plugin": "^2.8.1",
"http-proxy-middleware": "^0.12.0",
"json-loader": "^0.5.4",
"karma": "^0.13.15",
"karma-coverage": "^0.5.5",
"karma-mocha": "^0.2.2",
"karma-phantomjs-launcher": "^1.0.0",
"karma-sinon-chai": "^1.2.0",
"karma-sourcemap-loader": "^0.3.7",
"karma-spec-reporter": "0.0.24",
"karma-webpack": "^1.7.0",
"lolex": "^1.4.0",
"mocha": "^2.4.5",
"chai": "^3.5.0",
"sinon": "^1.17.3",
"sinon-chai": "^2.8.0",
"inject-loader": "^2.0.1",
"isparta-loader": "^2.0.0",
"phantomjs-prebuilt": "^2.1.3",
"chromedriver": "^2.21.2",
"cross-spawn": "^2.1.5",
"nightwatch": "^0.8.18",
"selenium-server": "2.53.0",
"ora": "^0.2.0",
"shelljs": "^0.6.0",
"url-loader": "^0.5.7",
"vue-hot-reload-api": "^1.2.0",
"vue-html-loader": "^1.0.0",
"vue-loader": "^8.3.0",
"vue-style-loader": "^1.0.0",
"webpack": "^1.12.2",
"webpack-dev-middleware": "^1.4.0",
"webpack-hot-middleware": "^2.6.0",
"webpack-merge": "^0.8.3"
}
}
And my base webpack config file
var path = require('path')
var config = require('../config')
var utils = require('./utils')
var projectRoot = path.resolve(__dirname, '../')
module.exports = {
entry: {
app: './src/main.js'
},
output: {
path: config.build.assetsRoot,
publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath,
filename: '[name].js'
},
resolve: {
extensions: ['', '.js', '.vue'],
fallback: [path.join(__dirname, '../node_modules')],
alias: {
'src': path.resolve(__dirname, '../src'),
'assets': path.resolve(__dirname, '../src/assets'),
'components': path.resolve(__dirname, '../src/components')
}
},
resolveLoader: {
fallback: [path.join(__dirname, '../node_modules')]
},
module: {
preLoaders: [
{
test: /\.vue$/,
loader: 'eslint',
include: projectRoot,
exclude: /node_modules/
},
{
test: /\.js$/,
loader: 'eslint',
include: projectRoot,
exclude: /node_modules/
}
],
loaders: [
{
test: /\.vue$/,
loader: 'vue'
},
{
test: /\.js$/,
loader: 'babel',
include: projectRoot,
exclude: /node_modules/
},
{
test: /\.json$/,
loader: 'json'
},
{
test: /\.html$/,
loader: 'vue-html'
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url',
query: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url',
query: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
},
eslint: {
formatter: require('eslint-friendly-formatter')
},
vue: {
loaders: utils.cssLoaders()
}
}
mightylal
All 17 comments
@mightlylal is this still current? What version of node & npm do you use?
LinusBorg
on 8 Sep 2016
Hello @LinusBorg ,
I'm using 6.2.2 for node and 3.9.5 for npm.
mightylal
on 8 Sep 2016
...and this is still happening on a fresh install with the latest vue-cli? Which OS?
LinusBorg
on 8 Sep 2016
Yes, I just tried it again. Windows 10.
mightylal
on 10 Sep 2016
We haven't had this reproduced by anyone in a month, so I'm assuming it's either fixed or something specific a single machine. Will reopen if we get other repros.
chrisvfritz
on 8 Oct 2016
It's happening on my dev machine, Windows 10.
Built files are meant to be served over an HTTP server.
Opening index.html over file:// won't work.
- building for production...cp: no such file or directory: static/*
Hash: acb19ce6ab97ae75abd0
Version: webpack 1.13.2
Time: 3524ms
Asset Size Chunks Chunk Names
static/js/manifest.28905c1d722a6a78b807.js 836 bytes 0, 2 [emitted] manifest
static/js/app.de663236067463a7c2e4.js 264 bytes 1, 0, 2 [emitted] app
static/js/vendor.2044b1050eab4285dea0.js 79 bytes 2, 0 [emitted] vendor
static/js/manifest.28905c1d722a6a78b807.js.map 8.92 kB 0, 2 [emitted] manifest
static/js/app.de663236067463a7c2e4.js.map 449 bytes 1, 0, 2 [emitted] app
static/js/vendor.2044b1050eab4285dea0.js.map 323 bytes 2, 0 [emitted] vendor
index.html 362 bytes [emitted]
ERROR in static/js/app.de663236067463a7c2e4.js from UglifyJs
SyntaxError: Unexpected token: name (Vue) [./src/main.js:1,0]
Done in 8.66s.
rizkyramadhan
on 18 Oct 2016
seems to be something different in your case - different error message.
https://github.com/vuejs-templates/webpack/blob/master/template/build/build.js#L23
this command does not seem to work on windows.
LinusBorg
on 18 Oct 2016
@rizkyramadhan Did you just upgrade an old project to Vue 2?
chrisvfritz
on 19 Oct 2016
Nope, fresh install
On Oct 19, 2016 9:44 AM, "Chris Fritz" [email protected] wrote:
@rizkyramadhan https://github.com/rizkyramadhan Did you just upgrade an
old project to Vue 2?—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/vuejs-templates/webpack/issues/229#issuecomment-254695696,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAHtXT_iNjiH3VaFJJBkBtzzRfAioHIsks5q1YQCgaJpZM4JpIED
.
rizkyramadhan
on 19 Oct 2016
@rizkyramadhan OK - can you open a new issue with more details then (e.g. options you chose during install, whether you modified any files after the project was generated, versions of Node and NPM you're using)? I'd rather not re-use this issue for any errors that happen to appear on a fresh install.
chrisvfritz
on 19 Oct 2016
Just for reference I was getting the exact same error. However I only get the error when building in Visual Studio Code.
This is a fresh install of the webpack template via vue-cli. Executing 'npm run build' from a command-prompt appears to work but executing it as a task in Visual Studio Code gives the "'unexpected token" error.
wakecoder
on 23 Oct 2016
@wakecoder It sounds like a VSCode problem then. 😕 I would look there.
chrisvfritz
on 23 Oct 2016
Same "syntax error" problem here. It's happening with MacOS Sierra on a fresh install. Using Atom and vim editors. It compiles when in build mode, but gives the error when compiling for production
andreapavoni
on 16 Nov 2016
Alright, so after deciding to try this again tonight after a couple of months I found the solution to my original problem. Not sure if this will be the same for anyone, but worth a shot.
For whatever reason it does not work with Node 6.0.0 or greater. I had 6.2.2, but the post where I found the solution tried 6.0.0 and it didn't work. Here is the post: https://forum-archive.vuejs.org/topic/4011/unexpected-token-import-after-starting-with-vue-cli-and-webpack/5
I'm using nvm and changed my node version back to 5.11.1 and running npm run build works perfectly.
mightylal
on 18 Nov 2016
II've found a solution without downgrading node or npm: the problem (for me) was caused by the fact that Babel did NOT transpile from ES6 to ES5. That's the reason why the error comes from UglifyJS.
The solution: Babel 6.x NEEDS a .babelrc file with the usual query options you normally put in webpack's babel loader section.
Hope this helps ;-)
andreapavoni
on 18 Nov 2016
...but this template does have a babelrc file...
LinusBorg
on 18 Nov 2016
@LinusBorg I forgot to mention that I've included babel-preset-stage-0 (that includes stage-2 too) and wrote my .babelrc like this:
{
"presets": ["es2015", "stage-0"]
}
and this is my package.json (written from scratch, tailored for my needs):
{
"repository": {},
"license": "MIT",
"dependencies": {
"babel-brunch": "~6.0.0",
"babel-core": "^6.18.2",
"babel-loader": "^6.2.7",
"babel-preset-es2015": "^6.18.0",
"babel-preset-stage-0": "^6.16.0",
"compression-webpack-plugin": "^0.3.2",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.25.0",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.9.0",
"node-sass": "^3.12.5",
"purifycss-webpack-plugin": "^2.0.3",
"sass-loader": "^4.0.2",
"style-loader": "^0.13.1",
"vue": "^2.0.6",
"vue-loader": "^9.9.3",
"webpack": "^1.13.3"
},
"scripts": {
"build": "webpack --progress --color -d --display-error-details",
"deploy": "NODE_ENV='production' webpack --no-color -p",
"watch": "webpack --watch-stdin --progress --color -d"
}
}
BTW, if still get errors with UglifyJS:
- verify that the non-minified output is correctly transpiled to ES5 running a normal/dev build task, that's how I was able to figure out my problem
- keep in mind that babel 6 gives precedence to
.babelrc(ignoring the query option in webpack's config) - run
npm cache clear
andreapavoni
on 18 Nov 2016
Related issues
dann95
·
3Comments
akoboy
·
3Comments
SSmale
·
3Comments
rkrejcii
·
4Comments
kamaleshsivaraj
·
3Comments
Most helpful comment
@LinusBorg I forgot to mention that I've included
babel-preset-stage-0(that includes stage-2 too) and wrote my.babelrclike this:and this is my
package.json(written from scratch, tailored for my needs):BTW, if still get errors with UglifyJS:
.babelrc(ignoring the query option in webpack's config)npm cache clear