fatal error occurs when trying to stringify circular JSON structure

[effervescentia]

• Webpack Version: 5.18.0
• Operating System (or Browser): MacOS 11.2.1
• Node Version: 15.2.0
• webpack-plugin-serve Version: 1.0.1 and 1.2.0

How Do We Reproduce?

My current configuration is highly intertwined with out application architecture, but I will work to extract a minimal repository to reproduce. In the meantime this is my configuration:

These are the plugins I'm using:
webpack.DefinePlugin
webpack.IgnorePlugin
webpack.BannerPlugin

html-webpack-plugin@5.1.0
webpackbar@5.0.0-3
case-sensitive-paths-webpack-plugin@2.3.0

These are the loaders I'm using:
babel-loader@8.2.2
@svgr/webpack@5.5.0
style-loader@2.0.0
css-loader@5.0.2
postcss-loader@5.0.0
file-loader@6.2.0

One of my coworkers noticed this recent change that appears to target the stringification, but this change has not yet been released anywhere. If we attempt to upgrade our version of webpack-plugin-serve to 1.2.1 then instead of this error we sporadically encounter javascript heap errors.

Expected Behavior

circular JSON stringification errors should be reported with the event name to aide debugging and should not break the watching & serving process

Actual Behavior

error is thrown and will either kill the process outright, or occasionally just send it into a zombie state where it stops responding to file changes, but continues to serve the content from before it crashed

from the looks of the error one of the events that the plugin attempts to forward to the frontend through the websocket connection has the compiler instance somewhere in its payload, which results in a circular stringification error.

I haven't had a chance to monkeypatch my local node_modules yet to report the offending event's name but will update here once I have

The offending event is called done and has the following field which recursively references itself

obj.data.compilation.compiler.root = obj.data.compilation.compiler

I'm definitely running with watch true, and can often get many re-compiles before this will happen, so it's a bit weird that a done event is being sent I imagine

⬢ webpack: TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'Compiler'
    --- property 'root' closes the circle
    at JSON.stringify (<anonymous>)
    at prep (/Users/benteichman/development/voiceflow/creator-app/node_modules/webpack-plugin-serve/lib/routes.js:14:29)
    at WebpackPluginServe.<anonymous> (/Users/benteichman/development/voiceflow/creator-app/node_modules/webpack-plugin-serve/lib/routes.js:102:58)
    at WebpackPluginServe.emit (node:events:341:22)
    at WebpackPluginServe.EventEmitter.emit (node:domain:467:12)
    at WebpackPluginServe.emit (/Users/benteichman/development/voiceflow/creator-app/node_modules/webpack-plugin-serve/lib/index.js:158:13)
    at /Users/benteichman/development/voiceflow/creator-app/node_modules/webpack-plugin-serve/lib/index.js:210:35
    at Hook.eval [as callAsync] (eval at create (/Users/benteichman/development/voiceflow/creator-app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:50:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/benteichman/development/voiceflow/creator-app/node_modules/tapable/lib/Hook.js:18:14)
    at Watching._done (/Users/benteichman/development/voiceflow/creator-app/node_modules/webpack/lib/Watching.js:215:28)

[shellscape]

Yeah we'll definitely need a minimal reproduction to solve this. It's likely highly specific to your implementation.