Next.js: [qrcode-react]: Unexpected token: name (QRCode)

[joncursi]

I'm having issues building the qrcode-react library with next build. I get the following error:

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

The project should build.

Current Behavior

The project does not build. Run npm run dev and it will run in development. Run npm run build and it fails to build for production with the following error:

{ Error: commons.js from UglifyJs
Unexpected token: name (QRCode) [commons.js:9424,6]
    at /Users/joncursi/Sites/joncursi/next-uglify-error/node_modules/next/dist/server/build/index.js:183:21
    at emitRecords.err (/Users/joncursi/Sites/joncursi/next-uglify-error/node_modules/webpack/lib/Compiler.js:269:13)
    at Compiler.emitRecords (/Users/joncursi/Sites/joncursi/next-uglify-error/node_modules/webpack/lib/Compiler.js:375:38)
    at emitAssets.err (/Users/joncursi/Sites/joncursi/next-uglify-error/node_modules/webpack/lib/Compiler.js:262:10)
    at applyPluginsAsyncSeries1.err (/Users/joncursi/Sites/joncursi/next-uglify-error/node_modules/webpack/lib/Compiler.js:368:12)
    at next (/Users/joncursi/Sites/joncursi/next-uglify-error/node_modules/tapable/lib/Tapable.js:218:11)
    at Compiler.compiler.plugin (/Users/joncursi/Sites/joncursi/next-uglify-error/node_modules/webpack/lib/performance/SizeLimitsPlugin.js:99:4)
    at Compiler.applyPluginsAsyncSeries1 (/Users/joncursi/Sites/joncursi/next-uglify-error/node_modules/tapable/lib/Tapable.js:222:13)
    at Compiler.afterEmit (/Users/joncursi/Sites/joncursi/next-uglify-error/node_modules/webpack/lib/Compiler.js:365:9)
    at require.forEach.err (/Users/joncursi/Sites/joncursi/next-uglify-error/node_modules/webpack/lib/Compiler.js:354:15)
  errors: 
   [ 'commons.js from UglifyJs\nUnexpected token: name (QRCode) [commons.js:9424,6]' ],
  warnings: [] }

Steps to Reproduce (for bugs)

1. Clone the reproduction repo: https://github.com/joncursi/next-uglify-error
2. npm install
3. npm run build
4. You'll see the error.

[email protected]

[joncursi]

I received excellent support on Zeit's Slack from @sergiodxa. It looks like this is an issue with the qrcode-react library. They appear to be using some ES6 code and not minifying it in a way that UglifyJS can understand.

A workaround is to replace UglifyJS with Babili in next.config.js:

const BabiliPlugin = require('babili-webpack-plugin');

module.exports = {
  webpack(config, { dev }) {
    // replace UglifyJS with Babili
    // see: https://github.com/zeit/next.js/issues/3553
    // eslint-disable-next-line immutable/no-mutation, no-param-reassign
    config.plugins = config.plugins.filter(plugin => (
      plugin.constructor.name !== 'UglifyJsPlugin'
    ));
    if (!dev) {
      config.plugins.push(new BabiliPlugin());
    }
    return config;
  },
};