Intermittent "TypeError: Converting circular structure to JSON"

[joshkel]

• Operating System: macOS 11.3.1
• Node Version: 12.18.3
• NPM Version: 1.22.10
• webpack Version: 5.37.0
• terser-webpack-plugin Version: 5.1.1

Expected Behavior

Build a project without errors.

Actual Behavior

Intermittently, while building my project, I get errors similar to the following:

ERROR in ./node_modules/jsoneditor/dist/jsoneditor.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'SymbolDef'
    |     property 'orig' -> object with constructor 'Array'
    |     index 0 -> object with constructor 'AST_SymbolFunarg'
    --- property 'thedef' closes the circle
    at JSON.stringify (<anonymous>)
    at serialize (/Users/joshkelley/src/repro2/node_modules/serialize-javascript/index.js:192:20)
    at /Users/joshkelley/src/repro2/node_modules/terser-webpack-plugin/dist/index.js:573:53
    at _next38 (eval at create (/Users/joshkelley/src/repro2/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:34:1)
    at _next16 (eval at create (/Users/joshkelley/src/repro2/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:95:1)
    at Hook.eval [as call] (eval at create (/Users/joshkelley/src/repro2/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:131:1)
    at Hook.CALL_DELEGATE [as _call] (/Users/joshkelley/src/repro2/node_modules/tapable/lib/Hook.js:14:14)
    at Compiler.newCompilation (/Users/joshkelley/src/repro2/node_modules/webpack/lib/Compiler.js:1031:26)
    at /Users/joshkelley/src/repro2/node_modules/webpack/lib/Compiler.js:1073:29
    at Hook.eval [as callAsync] (eval at create (/Users/joshkelley/src/repro2/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:4:1)
 @ ./src/JsonEditor.tsx 1:607-646
 @ ./src/Editor.tsx 1:172-209 1:446-456
 @ ./src/PlotPage.tsx 1:25-54 1:133-139
 @ ./src/MainPageContent.tsx 1:25-58 1:151-159
 @ ./src/AppPage.tsx 1:25-72 1:149-164
 @ ./src/App.tsx 1:25-56 1:125-132
 @ ./src/index.tsx 1:224-247 3:82-85

The problem seems to be related to parallelism and application size; it doesn't happen with Terser's parallel option enabled, it reliably happens if I build my whole application and disable Terser's parallel, and it seems to usually happen with the test project that I linked to.

Some debugging with console.log revealed that the error is because terser-webpack-plugin is trying to serialize the following:

{
  terser: '5.7.0',
  terserOptions: {
    parse: {
      ecma: 8,
      toplevel: [AST_Toplevel],
      filename: 'service-worker.js'
    },
    compress: { ecma: 5, warnings: false, comparisons: false, inline: 2 },
    mangle: { safari10: true },
    keep_classnames: false,
    keep_fnames: false,
    output: { ecma: 5, comments: false, ascii_only: true },
    ecma: 5
  }
}

So the options.parse.toplevel appears to contain the circular reference. toplevel and filename are apparently injected into the options object here by Terser.

I believe this is the same issue as webpack-contrib/mini-css-extract-plugin#674.

Code

webpack.config.js: https://github.com/joshkel/terser-repro/blob/master/config/webpack.config.js

How Do We Reproduce?

I put together a sample project at https://github.com/joshkel/terser-repro/. Unfortunately, I've had problems making it extremely consistent, so you may need to run yarn build a few times.

[alexander-akait]

I see... terser modify own options terser/terser#366

[alexander-akait]

Let's fix it, give me some time

[alexander-akait]

Please try https://github.com/webpack-contrib/terser-webpack-plugin/releases/tag/v5.1.2

[joshkel]

@alexander-akait Looks like that fixed it. Thanks!