2.7.1 is causing a terser issue in my applications

[heath-freenome]

When I bumped my applications to use 2.7.1 I started having my webpack builds fail with the following error:

static/js/client.7df81032.js from Terser
TypeError: Cannot read properties of undefined (reading 'references')
    at Rn.before (/Users/heath.chiavettone/dev/frodo-ui/node_modules/terser-webpack-plugin/node_modules/terser/dist/bundle.min.js:1:151004)
    at AST_Expansion.transform (/Users/heath.chiavettone/dev/frodo-ui/node_modules/terser-webpack-plugin/node_modules/terser/dist/bundle.min.js:1:84360)
    at /Users/heath.chiavettone/dev/frodo-ui/node_modules/terser-webpack-plugin/node_modules/terser/dist/bundle.min.js:1:84524
    at l (/Users/heath.chiavettone/dev/frodo-ui/node_modules/terser-webpack-plugin/node_modules/terser/dist/bundle.min.js:1:953)
    at e (/Users/heath.chiavettone/dev/frodo-ui/node_modules/terser-webpack-plugin/node_modules/terser/dist/bundle.min.js:1:1273)
    at Ln (/Users/heath.chiavettone/dev/frodo-ui/node_modules/terser-webpack-plugin/node_modules/terser/dist/bundle.min.js:1:84498)
    at /Users/heath.chiavettone/dev/frodo-ui/node_modules/terser-webpack-plugin/node_modules/terser/dist/bundle.min.js:1:87549
    at AST_Object.transform (/Users/heath.chiavettone/dev/frodo-ui/node_modules/terser-webpack-plugin/node_modules/terser/dist/bundle.min.js:1:84398)
    at /Users/heath.chiavettone/dev/frodo-ui/node_modules/terser-webpack-plugin/node_modules/terser/dist/bundle.min.js:1:85725
    at AST_Return.transform (/Users/heath.chiavettone/dev/frodo-ui/node_modules/terser-webpack-plugin/node_modules/terser/dist/bundle.min.js:1:84398)
Error: static/js/client.7df81032.js from Terser
TypeError: Cannot read properties of undefined (reading 'references')
    at Rn.before (/Users/heath.chiavettone/dev/frodo-ui/node_modules/terser-webpack-plugin/node_modules/terser/dist/bundle.min.js:1:151004)
    at AST_Expansion.transform (/Users/heath.chiavettone/dev/frodo-ui/node_modules/terser-webpack-plugin/node_modules/terser/dist/bundle.min.js:1:84360)
    at /Users/heath.chiavettone/dev/frodo-ui/node_modules/terser-webpack-plugin/node_modules/terser/dist/bundle.min.js:1:84524
    at l (/Users/heath.chiavettone/dev/frodo-ui/node_modules/terser-webpack-plugin/node_modules/terser/dist/bundle.min.js:1:953)
    at e (/Users/heath.chiavettone/dev/frodo-ui/node_modules/terser-webpack-plugin/node_modules/terser/dist/bundle.min.js:1:1273)
    at Ln (/Users/heath.chiavettone/dev/frodo-ui/node_modules/terser-webpack-plugin/node_modules/terser/dist/bundle.min.js:1:84498)
    at /Users/heath.chiavettone/dev/frodo-ui/node_modules/terser-webpack-plugin/node_modules/terser/dist/bundle.min.js:1:87549
    at AST_Object.transform (/Users/heath.chiavettone/dev/frodo-ui/node_modules/terser-webpack-plugin/node_modules/terser/dist/bundle.min.js:1:84398)
    at /Users/heath.chiavettone/dev/frodo-ui/node_modules/terser-webpack-plugin/node_modules/terser/dist/bundle.min.js:1:85725
    at AST_Return.transform (/Users/heath.chiavettone/dev/frodo-ui/node_modules/terser-webpack-plugin/node_modules/terser/dist/bundle.min.js:1:84398)
    at TerserPlugin.buildError (/Users/heath.chiavettone/dev/frodo-ui/node_modules/terser-webpack-plugin/dist/index.js:98:14)
    at Object.callback (/Users/heath.chiavettone/dev/frodo-ui/node_modules/terser-webpack-plugin/dist/index.js:241:48)
    at enqueue (/Users/heath.chiavettone/dev/frodo-ui/node_modules/terser-webpack-plugin/dist/TaskRunner.js:100:14)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

I'm not sure whether it was your bug fix or the two library updates. I'm not sure how to give you a reproducible example

[elbywan]

Hey @heath-freenome,

I'm not sure how to give you a reproducible example

And unfortunately I am unable to reproduce on my end. I am also not sure it is related to wretch at all since the latest update was pretty innocuous.

// index.js
import wretch from "wretch";

const api = wretch("https://jsonplaceholder.typicode.com");
api.get("/posts").json().then(console.log);

const headers1 = new Headers({ hello: "world" });
const headers2 = new Headers({ bonjour: "le monde" });
const headers3 = { hola: "mundo " };
const headers4 = [["hallo", "welt"]];

let w = wretch().headers(headers1);
console.log(w._options.headers);
// Object { hello: "world" }
w = w.headers(headers2);
console.log(w._options.headers);
// Object { hello: "world", bonjour: "le monde" }
w = w.headers(headers3);
console.log(w._options.headers);
// Object { hello: "world", bonjour: "le monde", hola: "mundo " }
w = w.headers(headers4);
console.log(w._options.headers);
// Object { hello: "world", bonjour: "le monde", hola: "mundo ", hallo: "welt" }

{
  "scripts": {
    "start": "webpack --mode development",
    "build": "webpack --mode production --config webpack.config.js"
  },
  "dependencies": {
    "wretch": "^2.7.1"
  },
  "devDependencies": {
    "webpack": "^5.89.0",
    "webpack-cli": "^5.1.4"
  }
}

// webpack.config.js
const TerserPlugin = require("terser-webpack-plugin");

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
  },
};

npm run build

> build
> webpack --mode production --config webpack.config.js

asset main.js 4.82 KiB [emitted] [minimized] (name: main)
orphan modules 14.1 KiB [orphan] 7 modules
./src/index.js + 7 modules 14.8 KiB [built] [code generated]
webpack 5.89.0 compiled successfully in 209 ms

[heath-freenome]

@elbywan I noticed that this PR related to the babel traverse upgrade failed one of your build pipelines... Did that somehow indicate this issue?

[elbywan]

@heath-freenome No it was just a timeout during the build - nothing related to a terser error.

[shelbyspeegle]

Nothing to add here other than to say we are experiencing the same thing (webpack 4 build failure with same message)after adding [email protected], after reading this thread and rolling back to 2.7.0 we are able to build again.

Build error resurfaces when we bump to [email protected] 🤔

[elbywan]

I tested a bit and AFAIK the bug arises when using an outdated version of terser-webpack-plugin which is unable to parse modern code.

If you are using webpack 4, you can install V4 of the plugin (npm i -D terser-webpack-plugin@4) and use it explicitely in the config file:

const path = require('path');
const TerserPlugin = require("terser-webpack-plugin");

module.exports = {
  entry: './src/index.mjs',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
  },
};

[heath-freenome]

I can confirm that upgrading to terser-webpack-plugin@4 worked for me too