[Question] RangeError: Maximum call stack size exceeded [HMR]

[lucadibiagio]

hi all,
we are building an SPA using Angular2 (rc4) AspNet Core and WebPack.

we are using WebPackDevmiddleware with HotmoduleReplacement enable, all goes well except the automatic browser refresh, when we change semething in the code (ts, scss html ecc) webpack rebuild the package, browser undestand that something has change (HWR rebuilding ecc) but instead of reload page browser we obtain an exception in the polyfills.boundle.js:

---

var parentHotUpdateCallback = this["webpackHotUpdate"];
    this["webpackHotUpdate"] = 
    function webpackHotUpdateCallback(chunkId, moreModules) { // eslint-disable-line no-unused-vars
        hotAddUpdateChunk(chunkId, moreModules);
        if(parentHotUpdateCallback) parentHotUpdateCallback(chunkId, moreModules);
    }

```--------------------------------

> exception of type Uncaught RangeError: Maximum call stack size exceeded
> 
> any idea?
> 
> thanks and regards

[MarkPieszak]

It could be somehow related to: webpack/webpack-dev-server#87

Are you using the base settings or did you change a few things in webpack config or your package.json scripts for webpack?

Haven't seen this error with the base repo at least yet.

[lucadibiagio]

hello Mark we have changed several things in the package and webpack files

aspnetwebpackcfg_files.zip

[MarkPieszak]

The problem is that you've doubled down on Hot, from the link:

just realised from here that you shouldn't be doing --hot and new webpack.HotModuleReplacementPlugin() in webpack.config.js > plugins: [] section simultaneously.

Check to see if you added --hot and the plugin in your webpack config

[lucadibiagio]

hi mark, we tried to remove from webpack.config the hotmodule replacement plugin

plugins: [

      new webpack.optimize.OccurenceOrderPlugin(true),
      new webpack.optimize.CommonsChunkPlugin({ name: 'polyfills', filename: 'polyfills.bundle.js', minChunks: Infinity }),
      // static assets
      new CopyWebpackPlugin([{ from: 'src/assets', to: 'assets' }]),
      // generating html
      new HtmlWebpackPlugin({ template: 'src/index.html' }),
      //new webpack.HotModuleReplacementPlugin(),
      // replace
      new webpack.DefinePlugin({
          'process.env': {
              'ENV': JSON.stringify(metadata.ENV),
              'NODE_ENV': JSON.stringify(metadata.ENV)
          }
      }),

but we obtain the following message from the browser when we try to do an "hot" update to something

[HMR] The following modules couldn't be hot updated: (Full reload needed)
This is usually because the modules which have changed (and their parents) do not know how to hot reload themselves. See http://webpack.github.io/docs/hot-module-replacement-with-webpack.html for more details.

and obviously we do not intentionally call "--hot" bat we dont'know if the --hot flag is called elsewhere

[Zucka]

@lucadibiagio Take a look at boot-client.ts

https://github.com/aspnet/JavaScriptServices/blob/dev/templates/Angular2Spa/ClientApp/boot-client.ts#L20

// Basic hot reloading support. Automatically reloads and restarts the Angular 2 app each time
// you modify source files. This will not preserve any application state other than the URL.
declare var module: any;
if (module.hot) {
    module.hot.accept();
}

That should fix HMR requiring full reload on each file change.

[lucadibiagio]

hello Zucka, now i do not have anymore the message of full reload but i still have the error of
"Maximum call stack size exceeded" that prevent the page to reload after code changes

[Zucka]

So removing
new webpack.HotModuleReplacementPlugin()
and having
declare var module: any;
doesn't help ?

Hmm, what about app configuration. The only thing i have configured for HMR is in the Configure section of my startup.cs As the following:

        if (env.IsDevelopment())
        {
            app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
            {
                HotModuleReplacement = true,
                ConfigFile = "config/webpack.config.js"
            });
        }

Startup.csand boot-client.ts is the only places i have code for enabling HMR

[SteveSandersonMS]

Thanks for providing the detailed info, and to others for trying to help. I can't suggest anything else without being able to repro the issue, so @lucadibiagio - if you are able to create a minimal repro project, that would certainly help us get to the bottom of it!

[SteveSandersonMS]

I'd be happy to try to diagnose and fix this if we had repro info, but since we don't there's not much I can do to proceed :(

I'll close this, but if anyone can give repro details, please post a new issue.