ERROR in renderer.js from UglifyJs Unexpected token punc «(»

Question

Version: webpack 2.3.3

Hi there

I'm trying to build my first Electron app using Vuejs. Everything seems to be going great until I've come to package the app.

When I run npm run dev everything works just fine.

However, when I run npm build:darwin I get the following error

ERROR in renderer.js from UglifyJs Unexpected token punc «(», expected punc «:» [renderer.js:26813,14]

It does end up compiling however when I run the application I get the white screen of death.

From what I read, this can be because Uglifyjs doesn't compile ES6 but you can overcome that by the following in your .babelrc file

"renderer": {
  "presets": [
    ["es2015", { "modules": false }],
    "stage-0"
  ]
}

I have no idea how to debug this. Any help would be greatly appreciated.

Thanks

The debug.log that is generated is...

0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/Cellar/node/7.9.0/bin/node',
1 verbose cli   '/usr/local/bin/npm',
1 verbose cli   'run',
1 verbose cli   'pack' ]
2 info using npm@4.2.0
3 info using node@v7.9.0
4 verbose run-script [ 'prepack', 'pack', 'postpack' ]
5 info lifecycle FormBuff@0.0.0~prepack: FormBuff@0.0.0
6 silly lifecycle FormBuff@0.0.0~prepack: no script for prepack, continuing
7 info lifecycle FormBuff@0.0.0~pack: FormBuff@0.0.0
8 verbose lifecycle FormBuff@0.0.0~pack: unsafe-perm in lifecycle true
9 verbose lifecycle FormBuff@0.0.0~pack: PATH: /usr/local/lib/node_modules/npm/bin/node-gyp-bin:/Users/admin/Code/electron/formbuff/node_modules/.bin:/Users/admin/Code/electron/formbuff/node_modules/.bin:/Users/admin/.config/yarn/link/node_modules/.bin:/Users/admin/Code/electron/formbuff/node_modules/.bin:/Users/admin/.config/yarn/link/    node_modules/.bin:/usr/local/Cellar/yarn/0.23.2/libexec/bin/node-gyp-bin:/Users/admin/.rbenv/shims:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Users/admin/.composer/vendor/bin:/Users/admin/go/bin
10 verbose lifecycle FormBuff@0.0.0~pack: CWD: /Users/admin/Code/electron/formbuff
11 silly lifecycle FormBuff@0.0.0~pack: Args: [ '-c', 'npm run pack:main && npm run pack:renderer' ]
12 silly lifecycle FormBuff@0.0.0~pack: Returned: code: 2  signal: null
13 info lifecycle FormBuff@0.0.0~pack: Failed to exec pack script
14 verbose stack Error: FormBuff@0.0.0 pack: `npm run pack:main && npm run pack:renderer`
14 verbose stack Exit status 2
14 verbose stack     at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/lifecycle.js:279:16)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at EventEmitter.emit (events.js:194:7)
14 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/spawn.js:40:14)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at ChildProcess.emit (events.js:194:7)
14 verbose stack     at maybeClose (internal/child_process.js:899:16)
14 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
15 verbose pkgid FormBuff@0.0.0
16 verbose cwd /Users/admin/Code/electron/formbuff
17 error Darwin 16.5.0
18 error argv "/usr/local/Cellar/node/7.9.0/bin/node" "/usr/local/bin/npm" "run" "pack"
19 error node v7.9.0
20 error npm  v4.2.0
21 error code ELIFECYCLE
22 error errno 2
23 error FormBuff@0.0.0 pack: `npm run pack:main && npm run pack:renderer`
23 error Exit status 2
24 error Failed at the FormBuff@0.0.0 pack script 'npm run pack:main && npm run pack:renderer'.
24 error Make sure you have the latest version of node.js and npm installed.
24 error If you do, this is most likely a problem with the FormBuff package,
24 error not with npm itself.
24 error Tell the author that this fails on your system:
24 error     npm run pack:main && npm run pack:renderer
24 error You can get information on how to open an issue for this project with:
24 error     npm bugs FormBuff
24 error Or if that isn't available, you can get their info via:
24 error     npm owner ls FormBuff
24 error There is likely additional logging output above.
25 verbose exit [ 2, true ]

Answer 1

I struggle with a similar problem. That was the trick https://github.com/SimulatedGREG/electron-vue/issues/200

Answer 2

You can try to install this version of uglify, it called uglify-es and it is:

JavaScript parser, mangler/compressor and beautifier toolkit for ES6+

uglify-es npm link

In my case, I have installed babel plugin to handle this issue. If you want to try you should do this:

Add this to your package.json

"babel-core": "latest",
"babel-loader": "latest",
"babel-plugin-transform-async-to-generator": "latest",
"babel-plugin-transform-runtime": "latest",
"babel-preset-es2015": "latest",
"babel-runtime": "latest"

Set you webpack.config file to be like (This is mine for example):

const path = require('path')
const webpack = require('webpack')

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        publicPath: '/dist/',
        filename: 'build.js'
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.(png|jpg|gif|svg)$/,
                loader: 'file-loader',
                query: {
                    name: '[name].[ext]?[hash]'
                }
            },
            {
                test: /\.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            }
        ]
    }
}

if (process.env.NODE_ENV === 'production') {
    module.exports.devtool = '#source-map'
    module.exports.plugins = (module.exports.plugins || []).concat([
        new webpack.optimize.UglifyJsPlugin({ sourceMap: true, compress: { warnings: false }})
    ])
}

Set your .babelrc file to be like:

{
    "presets": ["es2015"],
    "plugins": ["transform-runtime", "transform-async-to-generator"]
}

Hope it helps :)