WebpackDevMiddleware HotModuleReplacement runs continuously #388

New Issue

fergalmoran · 2025-08-09T17:16:06Z

fergalmoran commented

2025-08-09 17:16:06 +00:00

Originally created by @dteske25 on 10/3/2017

I am experiencing an issue where Hot Module Replacement is triggered constantly. I created an example project showing the same behavior here: https://github.com/dteske25/TestFrontEnd

The changes I made from the default React+Redux ASP.NET Core 2 template:

Installed babel to support loading .jsx

https://github.com/dteske25/TestFrontEnd/blob/master/TestFrontEnd/package.json#L20-L23

Created a .babelrc

{
  "presets": ["env", "react"]
}

Updated my webpack.config.js to include a rule for .jsx files

{ test: /\.jsx?$/, include: /ClientApp/, use: 'babel-loader' },

https://github.com/dteske25/TestFrontEnd/blob/master/TestFrontEnd/webpack.config.js#L21

Added a .jsx component and referenced it

https://github.com/dteske25/TestFrontEnd/blob/master/TestFrontEnd/ClientApp/components/Testing.jsx

Note: This component is as dumb as it gets

https://github.com/dteske25/TestFrontEnd/blob/master/TestFrontEnd/ClientApp/components/Counter.tsx#L18

Updated the tsconfig.json based on error messages I saw

https://github.com/dteske25/TestFrontEnd/blob/master/TestFrontEnd/tsconfig.json#L12-L13

...
"allowJs": true,
"allowSyntheticDefaultImports": true,
...

When I run the project, the new component is rendered inside the counter component, but logs are overwhelmed because Webpack constantly recompiles and replaces the modules.

Any ideas on what's happening?

*Originally created by @dteske25 on 10/3/2017* I am experiencing an issue where Hot Module Replacement is triggered constantly. I created an example project showing the same behavior here: https://github.com/dteske25/TestFrontEnd The changes I made from the default React+Redux ASP.NET Core 2 template: - Installed `babel` to support loading `.jsx` https://github.com/dteske25/TestFrontEnd/blob/master/TestFrontEnd/package.json#L20-L23 - Created a `.babelrc` ``` { "presets": ["env", "react"] } ``` - Updated my `webpack.config.js` to include a rule for `.jsx` files ```{ test: /\.jsx?$/, include: /ClientApp/, use: 'babel-loader' },``` https://github.com/dteske25/TestFrontEnd/blob/master/TestFrontEnd/webpack.config.js#L21 - Added a `.jsx` component and referenced it https://github.com/dteske25/TestFrontEnd/blob/master/TestFrontEnd/ClientApp/components/Testing.jsx > Note: This component is as dumb as it gets https://github.com/dteske25/TestFrontEnd/blob/master/TestFrontEnd/ClientApp/components/Counter.tsx#L18 - Updated the `tsconfig.json` based on error messages I saw https://github.com/dteske25/TestFrontEnd/blob/master/TestFrontEnd/tsconfig.json#L12-L13 ``` ... "allowJs": true, "allowSyntheticDefaultImports": true, ... ``` When I run the project, the new component is rendered inside the counter component, but logs are overwhelmed because Webpack constantly recompiles and replaces the modules. ![capture](https://user-images.githubusercontent.com/9992362/31110527-59c115b2-a7cd-11e7-96f9-b98d9d5fa3df.PNG) Any ideas on what's happening?

fergalmoran closed this issue

2025-08-09 17:16:06 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/JavaScriptServices#388