webpack with minimization (uglify) stopped working with v0.36

[mitra42]

• Version: introduced in 0.36, still present 0.37.1
• Platform: Darwin mitraglass 18.7.0 Darwin Kernel Version 18.7.0: Thu Jun 20 18:42:21 PDT 2019; root:xnu-4903.270.47~4/RELEASE_X86_64 x86_64
• Subsystem: webpack

Type: Bug

Severity: Medium

Description:

Somewhere between 0.35.0 and 0.36.0 IPFS stopped webpacking in the typical "production" configuration i.e. with Uglify, generating the error:

ERROR in dweb-transports-bundle.js from UglifyJs
Unexpected token name «await», expected punc «(» [dweb-transports-bundle.js:14721,8]

I missed it until now because the development (non uglify) webpack still works fine.

Steps to reproduce the error:

This may not be the simplest ...

git clone https://github.com/internetarchive/dweb-transports
edit package.json to upgrade ipfs from ^0.35.0 to ^0.36.0 or ^0.37.1
yarn install
webpack --mode production

Using webpack --mode development works fine

The specific set of webpack.config.js I use is in the repo, the problem doesn't seem to be sensitive to that, i.e. I've tried with different webpack configurations form other repos,, and with different babel / webpack versions without any change, all the versions I've tried work fine for development or on js-ipfs v0.35.0 but fail in production on 0.36.0 or 0.37.1

[alanshaw]

@mitra42 thanks for reporting, looks like uglifyjs doesn't support the await keyword even though it's supported in all modern browsers.

[mitra42]

That was my first thought - except that I have a bunch of other cases in that repo that use await and webpack just fine, for example in https://github.com/internetarchive/dweb-transports/blob/master/httptools.js.

Maybe its a syntax error in how its used in one particular place that uglify catches but other things ignore? Unfortunately I couldn't figure out where as the error message is unhelpfully displayed by its position in the uglified code rathert han in the source code !

[hugomrdias]

uglifyjs is deprecated, try this https://github.com/webpack-contrib/terser-webpack-plugin

check our webpack config https://github.com/ipfs/aegir/blob/master/src/config/webpack.config.js#L80

[alanshaw]

@mitra42 can you try this and verify? It would be awesome if someone updated our webpack example to use Terser if the default in webpack is going to cause problems 😜.

[mitra42]

@hugomrdias - where do you see uglifyjs as deprecated, uglifyes appears to be, but I cant find anything suggesting uglifyjs is. Though it seems to be badly maintained - and very version dependent for example other repos I just tried broke when I updated uglifyjs-webpack-plugin to 2.x.x

@alanshaw js-ipfs doesnt appear to have a default webpack (or is that what is in ipfs/aegir?), but even if it did I believe it would be overridden by the webpack.config in whatever library (like dweb-transports) is doing the require ipfs.

[hugomrdias]

@mitra42 uglifyjs only supports es5, uglify es is deprecated and terserjs is the current default.

Either you run your code through babel and use uglify or you need to use terserjs.

FYI webpack defaults to terserjs.

refs
https://webpack.js.org/configuration/optimization/#optimizationminimize
https://github.com/terser/terser#why-choose-terser

[alanshaw]

Thanks @hugomrdias - good to know.

@mitra42 dweb-transports is configured to use uglify, I think you'll just need to remove that config or switch to Terser. Also, yes, js-ipfs uses the webpack config provided by aegir.

[mitra42]

Understood - Trying to support different transports with different constraints in the same library ended up too had to do. I ended up solving this and the ES6 modules issue #1927 by pulling IPFS out of the library so the consumer can include the IPFS minified version directly in the browser (and skip IPFS for the ES6 modules case)