Uncaught RangeError: Maximum call stack size exceeded

[hasandogu]

Hey all,

I am using webpack-dev-middleware and webpack-hot-middleware and I'm using the setup in my plugins.

                new webpack.HotModuleReplacementPlugin(),

                new ReactRefreshWebpackPlugin({
                    overlay: false
                }),

and the HMR seems to work fine as it is updating the content in the browser but I am getting the following error every time I change a file.

[HMR] Updated modules:
process-update.js?e135:127 [HMR] - ./ClientApp/components/shared/Header.jsx
process-update.js?e135:132 [HMR] App is up to date.
client.js?58a8:241 [HMR] bundle rebuilding
client.js?58a8:250 [HMR] bundle rebuilt in 466ms
process-update.js?e135:51 [HMR] Checking for updates on the server...
bootstrap:1068 Uncaught RangeError: Maximum call stack size exceeded
at hotAddUpdateChunk (bootstrap:1068)
at webpackHotUpdateCallback (bootstrap:7)
at webpackHotUpdateCallback (bootstrap:8)
at webpackHotUpdateCallback (bootstrap:8)
at webpackHotUpdateCallback (bootstrap:8)
at webpackHotUpdateCallback (bootstrap:8)
at webpackHotUpdateCallback (bootstrap:8)
at webpackHotUpdateCallback (bootstrap:8)
at webpackHotUpdateCallback (bootstrap:8)
at webpackHotUpdateCallback (bootstrap:8)
.
.
.

I have found a few issues around Github (below) suggesting that I shouldn't enable --hot option for the WDS together with the HotModuleReplacementPlugin, but I am using WHM.

• ~~Anyone else receiving an error Uncaught RangeError: Maximum call stack size exceeded after one hot reload?~~ webpack/webpack-dev-server#87
• Uncaught RangeError: Maximum call stack size exceeded gaearon/react-hot-loader#911

Is there anything I am missing here that I should disable with webpack-dev-middleware for this to not happen?

I have checked that I only have a single webpack module included in the project.
`-- webpack@4.44.2

[hasandogu]

Actually, I have found that aspnet/JavascriptServices was injecting HotModuleReplacementPlugin into the plugins list during compilation.

https://github.com/aspnet/JavaScriptServices/blob/7a0413434577274666ff72ee790b53cc71b22970/src/Microsoft.AspNetCore.SpaServices/npm/aspnet-webpack/src/WebpackDevMiddleware.ts#L104

Closing this.

[glennflanagan]

FWIW I was seeing this because my webpack-dev-server was not the latest version - updating to webpack-dev-server@3.11.2 and removing all reference to the old hot-reloader seemed to do the trick for me.

[jancama2]

FWIW I was seeing this because my webpack-dev-server was not the latest version - updating to webpack-dev-server@3.11.2 and removing all reference to the old hot-reloader seemed to do the trick for me.

@glennflanagan what do you mean by removing all reference to the old hot-reload? You mean removing the HotModuleReplacementPlugin?
I'm having the same problem and your approach (if it means removing the plugin) works for me. I use ejected CRA and there is this statement:

// This is necessary to emit hot updates (CSS and Fast Refresh)

I just wonder why it says the plugin is necessary when the fast refresh works without it .

[terrencejames]

@hasandogu How did you fix this error using aspnet-webpack? It seems that having two HMR plugins causes this stack overflow but I can't not enable it on my webpack.config.js or else I get

Error: [React Refresh] Hot Module Replacement (HMR) is not enabled! React Refresh requires HMR to function properly.

[pmmmwh]

@terrencejames This error will be gone in the next version of the plugin.

[hasandogu]

@terrencejames I actually attached it to an environment variable and removed the 2nd copy of the HMR if that env variable was set.

PS: I was actually in the middle of an upgrade from .Net Core 3.1 to .Net 5, where the Javascript services and node services don't work anymore. I took the opportunity to switch to using Razzle instead at the end so that we don't manage the react refresh plugin directly anymore.