Turf: webpack uglifyjs plugin fails with "Unexpected token name" for new @turf dependencies

[ttaranov]

While upgrading our dependencies/build to new @turf version 5.0.4, I couldn't get passed error below.

ERROR in vendor.e9be95037a86de0670cd.js from UglifyJs
Unexpected token name «key», expected punc «;» [vendor.e9be95037a86de0670cd.js:206,11]

As soon as I revert code/package.json changes back to [email protected], webpack's webpack.optimize.UglifyJsPlugin works ok. Our project doesn't use typescript.

The error occurs only during production build that includes minification plugin/step webpack.optimize.UglifyJsPlugin with Webpack 2.6.1.

[DenisCarriere]

This doesn't sound like a TypeScript issue but an ES5 compatible code, which version of Uglify are you using? The current Turf build uses Browerify + Uglify.

What's your webpack config, we can try it in Turf

[ttaranov]

unfortunately our webpack config is a bit complex to share, although I'll try to put something isolated together.

below are some relevant parts from config that I think are relevant:

plugins: [
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
}),

loaders:
{
test: /.(js|jsx)$/,
include: babelSources,
loader: 'babel-loader'
}

and .babelrc
{
"presets": [
"es2015",
"stage-0",
"react"
],
"env": {
"start": {
"presets": [
"react-hmre"
]
},
"test": {
"sourceMaps": "both"
}
},
"plugins": [
"transform-runtime",
"transform-react-jsx-source"
]
}

and some deps from package.json
"babel-core": "^6.0.0",
"babel-eslint": "^7.1.1",
"babel-jest": "^18.0.0",
"babel-loader": "^6.0.0",
"babel-plugin-module-resolver": "^2.7.1",
"babel-plugin-transform-react-jsx-source": "^6.22.0",
"babel-plugin-transform-runtime": "^6.15.0",
"babel-polyfill": "^6.3.14",
"babel-preset-es2015": "^6.0.15",
"babel-preset-react": "^6.16.0",
"babel-preset-react-hmre": "^1.1.1",
"babel-preset-stage-0": "^6.5.0",
"sass-loader": "^5.0.1",
"style-loader": "^0.13.1",
"url-loader": "^0.5.6",
"webpack": "^2.6.1",
"webpack-dev-server": "^2.5.1",
"webpack-merge": "^4.1.0",
"clean-webpack-plugin": "^0.1.16",
"copy-webpack-plugin": "^4.0.1",
"extract-text-webpack-plugin": "^2.0.1",
"html-webpack-plugin": "^2.28.0"

[rowanwins]

Hi @ttaranov

Can you take a look at this issue, perhaps upgrading your version of the uglify-webpack-plugin will help...

[DenisCarriere]

Going to close this issue since this seems related to a personal build/config issue and not so much related to TurfJS.

If there is something in our publishing that needs to be fixed, feel free to send a PR or a fix proposal.

We are using Browserify + Uglify to publish the final web bundle.

https://github.com/Turfjs/turf/blob/master/packages/turf/package.json#L20-L21

And Rollup for our CommonJS build.

https://github.com/Turfjs/turf/blob/master/rollup.config.js

[CooperSystems]

This one got me too! Downgraded turf for now and it's all compiling, will have to look at babel

[DenisCarriere]

🤔 .. Strange stuff... I'm 👍 for improving the published turf.js. We could include Babel in Turf since we will need that soon as more and more repos are moving towards ES6 code base.

[stebogit]

include Babel in Turf

Yay!! 🎉 😄

[DenisCarriere]

lol! It's going to happen... but it was too much for me to handle for the v5.0 release, and even with the next to zero configuration publish we are still having some minor issues.

Another thing that broke with the Babel build was JSTS 🤦‍♂️ ... so I started refactoring that repo purely for TurfJS usage.

https://github.com/DenisCarriere/turf-jsts

I'm at 80% done... it's just a MASSIVE repo!

[codeofsumit]

got me too. Not sure how to fix it yet. I even included turf to my babel compile step (which shouldn't be necessary for turf users IMO):

But it did not fix it yet.

[rowanwins]

HI @codeofsumit

Are you able to provide any info on where the error is coming from?

[codeofsumit]

Error is:

ERROR in leaflet.pm.min.js from UglifyJs
Unexpected token name «key», expected punc «;» [leaflet.pm.min.js:72,11]

leaflet.pm.min.js (after compilation & babel, but before uglifying) is this at line 72:

"use strict";
/* harmony default export */ __webpack_exports__["a"] = (function (target, source) {
  for (let key in source) {
    if (source.hasOwnProperty(key)) target[key] = source[key]
  }
});

npm debug log says this:

0 info it worked if it ends with ok
1 verbose cli [ '/Users/sumitkumar/.nvm/versions/node/v8.1.2/bin/node',
1 verbose cli   '/Users/sumitkumar/.nvm/versions/node/v8.1.2/bin/npm',
1 verbose cli   'run',
1 verbose cli   'build' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle [email protected]~prebuild: [email protected]
6 info lifecycle [email protected]~build: [email protected]
7 verbose lifecycle [email protected]~build: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]~build: PATH: /Users/sumitkumar/.nvm/versions/node/v8.1.2/lib/node_modules/npm/bin/node-gyp-bin:/Users/sumitkumar/Projects/leaflet.pm/node_modules/.bin:/Users/sumitkumar/.nvm/versions/node/v8.1.2/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin
9 verbose lifecycle [email protected]~build: CWD: /Users/sumitkumar/Projects/leaflet.pm
10 silly lifecycle [email protected]~build: Args: [ '-c', 'webpack --config=webpack.build.js' ]
11 silly lifecycle [email protected]~build: Returned: code: 2  signal: null
12 info lifecycle [email protected]~build: Failed to exec build script
13 verbose stack Error: [email protected] build: `webpack --config=webpack.build.js`
13 verbose stack Exit status 2
13 verbose stack     at EventEmitter.<anonymous> (/Users/sumitkumar/.nvm/versions/node/v8.1.2/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:280:16)
13 verbose stack     at emitTwo (events.js:125:13)
13 verbose stack     at EventEmitter.emit (events.js:213:7)
13 verbose stack     at ChildProcess.<anonymous> (/Users/sumitkumar/.nvm/versions/node/v8.1.2/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack     at emitTwo (events.js:125:13)
13 verbose stack     at ChildProcess.emit (events.js:213:7)
13 verbose stack     at maybeClose (internal/child_process.js:897:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:208:5)
14 verbose pkgid [email protected]
15 verbose cwd /Users/sumitkumar/Projects/leaflet.pm
16 verbose Darwin 17.0.0
17 verbose argv "/Users/sumitkumar/.nvm/versions/node/v8.1.2/bin/node" "/Users/sumitkumar/.nvm/versions/node/v8.1.2/bin/npm" "run" "build"
18 verbose node v8.1.2
19 verbose npm  v5.5.1
20 error code ELIFECYCLE
21 error errno 2
22 error [email protected] build: `webpack --config=webpack.build.js`
22 error Exit status 2
23 error Failed at the [email protected] build script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 2, true ]

Webpack Config is this:

/* eslint import/no-extraneous-dependencies: 0 */
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const path = require('path');

module.exports = {
    watch: false,
    // devtool: 'cheap-source-map',
    entry: ['./src/js/L.PM.js'],
    output: {
        filename: 'leaflet.pm.min.js',
        path: path.resolve(__dirname, 'dist'),
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                include: [path.resolve(__dirname, 'src'), path.resolve(__dirname, 'node_modules/@turf/*')],
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['env'],
                    },
                },
            },
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: 'css-loader',
                }),
            },
            {
                test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
                loader: 'url-loader',
            },
        ],
    },
    plugins: [
        new ExtractTextPlugin('leaflet.pm.css'),
        new webpack.optimize.UglifyJsPlugin({
            minimize: true,
            compress: {
                warnings: false, // Suppress uglification warnings
                screw_ie8: true,
            },
            output: {
                comments: false,
            },
        }),
        new webpack.DefinePlugin({
            'process.env': {
                // This has effect on the react lib size
                NODE_ENV: JSON.stringify('production'),
            },
        }),
    ],
};

[DenisCarriere]

I am 98% sure this is JSTS that's causing this issue, I'm currently trying to remove extend.js from the next refactored ES6 jsts.

Lets re-open this and revisit this issue after v5.1 is released with the refactored turf-jsts implemented.

[DenisCarriere]

JSTS extend.js

export default function (target, source) {
  for (let key in source) {
    if (source.hasOwnProperty(key)) target[key] = source[key]
  }
}

[polizz]

Ran into same issue with unexpected bump from 5.0.4 to latest. We downgraded @turf/meta to get around this.

ERROR in bundle.js from UglifyJs
Unexpected token: punc (,) [bundle.js:96777,134]

[fullermike]

@polizz , Thank you for this, it just fixed an issue we were trying to fix for the last 4 hours !

[DenisCarriere]

@polizz What was the issue? I remember having that same issue with uglify but then it got solved in the latest release. @fullermike are you saying you are still having that issue with v5.1.x?

It might be an issue with the version of uglify-js you are using, in TurfJS we are minifying the bundle with uglify, but I also imported it as a devDependency, maybe that can solve the issue?

https://github.com/Turfjs/turf/blob/master/packages/turf/package.json#L69

It's hard to troubleshoot when Error message doesn't say anything.. (I use to get the same message on my end)

[DenisCarriere]

@polizz @fullermike is it only happening with @turf/meta or other modules as well?

Maybe it's the shorthand syntax here: https://github.com/Turfjs/turf/blob/master/packages/turf-meta/index.js#L589

However it seemed to transpile correctly in the "main" bundle:
https://unpkg.com/@turf/meta@5.1.0/main.js

[polizz]

Yes, that line 589 in @turf/meta was the specific error. We are using an older version of webpack (2.7.0) and the uglify-js version is 2.8.29 (webpack requires ^2.8.27).

When I change that to full object syntax it does transpile.

callback(feature(geometry, properties, {bbox: bbox, id: id}), featureIndex, 0);

[DenisCarriere]

@polizz Fixing some of the new issues raised from the recent v5.1 release.

PR https://github.com/Turfjs/turf/pull/1166

[DenisCarriere]

@ttaranov Can you test your build again, the Unexpected token name «key», expected punc «;» Error should be fixed now in the v5.1.x release.

[fullermike]

@DenisCarriere
~late response to: "fullermike are you saying you are still having that issue with v5.1.x",

I was using a v4.x version, downgrading to a v3.5.x version is sufficient for the application I'm working with, once I have extra time I'll be able to test out the v5.1.x updated version(s). Thanks for checking into it.