How to stop infinite refresh in react webpack app? - reactjs

Question

When I change the TS file, Webpack doesn't stop refreshing the page.
Console says: #ebpack 5.66.0 compiled successfully
I've googled this and tried different plugins, but they didn't work.
The mild refresh plugin just stopping the refresh and excluding JS files from ts-loader doesn't work at all.
The related issue in git didn't give the result as well.
webpack.config.json:
const webpack = require('webpack');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebPackPlugin = require("html-webpack-plugin");
const HTMLInlineCSSWebpackPlugin = require("html-inline-css-webpack-plugin").default;
const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
const htmlWebpackPlugin = new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html",
inlineSource: '.(js|css)$',
inject: 'body',
});
module.exports = {
entry: ['./src/index.tsx', './src/main.css'],
resolve: {
extensions: ['.js', '.jsx', '.ts', '.tsx'],
fallback: {
"path": require.resolve("path-browserify"),
"os": require.resolve("os-browserify/browser"),
"url": require.resolve("url"),
"tty": require.resolve("tty-browserify"),
"minimatch": require.resolve("minimatch"),
"process": require.resolve("process")
},
},
module: {
rules: [{
test: /\.tsx?$/,
exclude: [/node_modules/, /\.js$/, /\.d\.ts$/, /dist/],
loader: 'ts-loader',
options: {
configFile: 'tsconfig.json',
}
},
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader"
]
}
],
},
output: {
filename: 'bundle.js',
publicPath: '',
},
plugins: [
new webpack.ProvidePlugin({
process: 'process',
}),
new MiniCssExtractPlugin({
filename: "main.css",
chunkFilename: "mainc.css"
}),
htmlWebpackPlugin,
new HTMLInlineCSSWebpackPlugin(),
new InlineChunkHtmlPlugin(HtmlWebPackPlugin, [/bundle/]),
]
};
package.json:
{
"name": "browser",
"version": "0.0.0",
"scripts": {
"build": "webpack --mode development",
"start": "webpack serve --mode development --port 3000"
},
"devDependencies": {
"#types/chrome": "^0.0.163",
"#types/jquery": "^3.5.10",
"#types/node": "^16.11.7",
"#types/react": "^17.0.34",
"#types/react-dom": "^17.0.11",
"#types/vscode": "^1.62.0",
"#types/vscode-webview": "^1.57.0",
"css-loader": "^6.5.1",
"html-inline-css-webpack-plugin": "^1.11.1",
"html-webpack-plugin": "^5.5.0",
"mini-css-extract-plugin": "^2.4.6",
"react-dev-utils": "^12.0.0",
"ts-loader": "^9.2.6",
"typescript": "^4.5.4",
"webpack": "^5.66.0",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^4.7.3"
},
"dependencies": {
"ace-builds": "^1.4.13",
"axios": "^0.24.0",
"bootstrap": "^5.1.3",
"jquery": "^3.6.0",
"minimatch": "^5.0.1",
"mobx": "^6.3.6",
"mobx-react": "^7.2.1",
"os-browserify": "^0.3.0",
"path-browserify": "^1.0.1",
"process": "^0.11.10",
"react": "^17.0.2",
"react-ace": "^9.5.0",
"react-bootstrap": "^2.0.2",
"react-dom": "^17.0.2",
"redoc": "^2.0.0-rc.66",
"styled-components": "^5.3.5",
"tty-browserify": "0.0.1",
"url": "^0.11.0",
"uuid": "^8.3.2"
}
}

Answer 1

You better change InlineChunkHtmlPlugin tests from /bundle/ to /runtime/.
Replace
new InlineChunkHtmlPlugin(HtmlWebPackPlugin, [/bundle/])
With
new InlineChunkHtmlPlugin(HtmlWebPackPlugin, [/runtime~.+[.]tsx/])
OR
new InlineChunkHtmlPlugin(HtmlWebPackPlugin, [/runtime/])