Next.js: "TypeError: Converting circular structure to JSON" unhandled promise error when emitWarning is issued from Webpack and HMR tries to send it to the client.

[nicolasgarfinkiel]

Bug report

Describe the bug

When emitWarning is used from Webpack, a "TypeError: Converting circular structure to JSON" unhandled promise error occurs when HMR tries to send it to the client.

To Reproduce

1. Reference any webpack loader (like eslint-loader)
2. Run next on dev mode
3. Save any change to your code that makes HMR push a warning to the client

Expected behavior

An unhandled promise error prints on the console where next is being run.

Additional context

I created a PR to fix this issue, just a minor code change. PR: 8600

[Timer]

Hi! We need a full reproduction to be able to investigate and fix this. Thanks!

[nicolasgarfinkiel]

Hey, sorry I didn't come back to this earlier. There was a test case that was failing with my original PR. I could send a PR with a fix to that test case and an additional test case that reproduces the problem.

Anyways, here's a small setup that reproduces the issue. I failed to mention a few things here and there, namely that this error occurs when using typescript.

https://github.com/nicolasgarfinkiel/next-typescript-wepack-warning-hmr-circular-error

Thanks!

[Timer]

Thanks for providing that! We'll fix the bug asap.

[kenberkeley]

https://spectrum.chat/next-js/general/anyone-getting-errors-from-webpack-hot-middleware~07a5bc2b-ff99-4ca6-b0c9-7aa12fce68ff

---

Update: using Prettier can solve this issue (don't know why, demo: https://github.com/kenberkeley/quiz/commit/9c624d7e979b824a24f68f67728aea04d114557f)

[s-h-a-d-o-w]

Searching around a bit and through HarmonyCompatibilityDependency (but NormalModule and originModule are mentioned too), I stumbled across this.
Thought I'd post it here in case this description of how things are connected helps with tracking down the problem.

The error I get is:

UnhandledPromiseRejectionWarning: TypeError: Converting circular structure to JSON
--> starting at object with constructor 'NormalModule'
|     property 'dependencies' -> object with constructor 'Array'
|     index 0 -> object with constructor 'HarmonyCompatibilityDependency'
--- property 'originModule' closes the circle
at JSON.stringify (<anonymous>)

[skylarmb]

any update on this? Seeing this when upgrading from 9.2.1 to 9.2.3-canary.12

(node:34551) UnhandledPromiseRejectionWarning: TypeError: Converting circular structure to JSON
    at JSON.stringify (<anonymous>)
    at /Users/[redacted]/node_modules/webpack-hot-middleware/middleware.js:111:38
    at /Users/[redacted]/node_modules/webpack-hot-middleware/middleware.js:66:7
    at Array.forEach (<anonymous>)
    at everyClient (/Users/[redacted]/node_modules/webpack-hot-middleware/middleware.js:65:26)
    at Object.publish (/Users/[redacted]/node_modules/webpack-hot-middleware/middleware.js:110:7)
    at Function.middleware.publish (/Users/[redacted]/node_modules/webpack-hot-middleware/middleware.js:48:17)
    at HotReloader.send.args [as send] (/Users/[redacted]/node_modules/next/dist/server/hot-reloader.js:5:678)
    at /Users/[redacted]/node_modules/next/dist/server/hot-reloader.js:15:508
    at typePromise.then.typeMessages (/Users/[redacted]/node_modules/next/dist/build/output/index.js:5:651)
(node:34551) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an asysyasync function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 4)

[danilofuchs]

I removed eslint-loader from our webpack config and it seems to work for now.

[samstr]

I have this error too. Here's some additional info from Sentry, if it helps.

Note that I"m also using eslint-loader in my next.config.js

if (process.env.NODE_ENV === 'development') { config.module.rules.push({ test: /\.tsx?$/, enforce: 'pre', exclude: [/node_modules/, /\.next/, /out/, /pages/], use: [ { options: { cache: true, eslintPath: require.resolve('eslint'), }, loader: require.resolve('eslint-loader'), }, ], }); }

[Timer]

Fix up in https://github.com/zeit/next.js/pull/11976