Module not found: Error: Can't resolve 'react-hot-loader/patch' #481

New Issue

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

fergalmoran commented

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

Originally created by @QuantumHive on 8/22/2017

I've been migrating my asp netcore 1.1 app to 2.0. Previously I didn't enable and configure HRM, because I thought it wouldn't work. Well since I'm already in the migrating process, I thought to give it a try, but unfortunately my expectations were right, it doesn't work that well.

When I followed the docs and enabled HRM, all seemed to work fine, but suddenly (the second time I tried to run my app) I got this error:

fail: Microsoft.AspNetCore.NodeServices[0]
Hash: 17bde93669f36e97cc41
Version: webpack 3.5.5
Time: 7252ms
Asset Size Chunks Chunk Names
674f50d287a8c48dc19ba404d20fe713.eot 166 kB [emitted]
af7ae505a9eed503f8b8e6982036873e.woff2 77.2 kB [emitted]
fee66e712a8a08eef5805a46892932ad.woff 98 kB [emitted]
b06871f281fee6b241d60582ae9369b9.ttf 166 kB [emitted]
912ec66d7572ff821749319396470bde.svg 444 kB [emitted] [big]
main.js 6.32 MB 0 [emitted] [big] main
[2] ./node_modules/react/react.js 56 bytes {0} [built]
[12] ./node_modules/react-redux/es/index.js 230 bytes {0} [built]
[37] ./node_modules/react-router-dom/es/index.js 925 bytes {0} [built]
[266] multi react-hot-loader/patch webpack-hot-middleware/client?path=__webpack_hmr&dynamicPublicPath=true ./index.js 52 bytes {0} [built]
[267] (webpack)-hot-middleware/client.js?path=__webpack_hmr&dynamicPublicPath=true 6.68 kB {0} [built]
[268] ./node_modules/querystring-es3/index.js 127 bytes {0} [built]
[271] ./node_modules/strip-ansi/index.js 161 bytes {0} [built]
[273] (webpack)-hot-middleware/client-overlay.js 1.82 kB {0} [built]
[278] (webpack)-hot-middleware/process-update.js 3.88 kB {0} [built]
[279] ./App/index.js 1.09 kB {0} [built]
[430] ./node_modules/bootstrap/scss/bootstrap.scss 1.26 kB {0} [built]
[432] ./node_modules/font-awesome/scss/font-awesome.scss 1.27 kB {0} [built]
[439] ./App/styles/spinner.scss 1.39 kB {0} [built]
[440] ./App/styles/app.scss 1.38 kB {0} [built]
[441] ./App/configureStore.js 561 bytes {0} [built]
+ 516 hidden modules
  ERROR in multi react-hot-loader/patch webpack-hot-middleware/client?path=__webpack_hmr&dynamicPublicPath=true ./index.js
  Module not found: Error: Can't resolve 'react-hot-loader/patch' in 'C:\dev\optimus\torque\supervisor\Optimus.Supervisor.Ui.Mvc\App'
   @ multi react-hot-loader/patch webpack-hot-middleware/client?path=__webpack_hmr&dynamicPublicPath=true ./index.js

This is my webpack.config.js:

const path = require("path");
const webpack = require("webpack");
const autoprefixer = require("autoprefixer");

module.exports = {
    resolve: { extensions: ["*", ".js"] },
    context: path.resolve(__dirname, "./App"),
    entry: { main: "./index.js" },
    output: {
        path: path.resolve(__dirname, "./wwwroot/dist"),
        publicPath: "/dist/",
        filename: "[name].js"
    },
    devtool: "eval-source-map",
    plugins: [
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify("development"),
            __DEV__: true
        }),
        new webpack.LoaderOptionsPlugin({
            options: {
                postcss: () => [autoprefixer]
            }
        })
    ],
    module: {
        rules: [
            { test: /\.jsx?$/, exclude: /node_modules/, loaders: ["babel-loader"] },
            { test: /\.eot(\?v=\d+.\d+.\d+)?$/, loader: "file-loader" },
            { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
            { test: /\.[ot]tf(\?v=\d+.\d+.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/octet-stream" },
            { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=image/svg+xml" },
            { test: /\.(jpe?g|png|gif)$/i, loader: "file-loader?name=[name].[ext]" },
            { test: /\.ico$/, loader: "file-loader?name=[name].[ext]" },
            {
                test: /(\.css|\.scss|\.sass)$/, use: [
                    "style-loader",
                    {
                        loader: "css-loader",
                        options: {
                        }
                    },
                    {
                        loader: "postcss-loader",
                        options: {
                            plugins: [autoprefixer]
                        }
                    },
                    {
                        loader: "sass-loader",
                        options: {
                            //so we can use @import in the custom styles that are relative to the /styles folder
                            includePaths: [path.resolve(__dirname, "./App/styles")]
                        }
                    }
                ]
            }
        ]
    }
}

and my package.json:

{
  "name": "optimus.supervisor",
  "version": "1.0.0",
  "dependencies": {
    "aspnet-webpack-react": "^3.0.0",
    "axios": "0.16.2",
    "bootstrap": "4.0.0-beta",
    "font-awesome": "4.7.0",
    "lodash": "4.17.4",
    "moment": "2.18.1",
    "react": "15.6.1",
    "react-addons-css-transition-group": "15.6.0",
    "react-addons-transition-group": "15.6.0",
    "react-dom": "15.6.1",
    "react-redux": "5.0.6",
    "react-router": "4.1.2",
    "react-router-dom": "4.1.2",
    "react-router-redux": "4.0.8",
    "reactstrap": "4.8.0",
    "redux": "3.7.2",
    "redux-thunk": "2.2.0",
    "webpack-hot-middleware": "2.18.2"
  },
  "devDependencies": {
    "aspnet-webpack": "2.0.1",
    "autoprefixer": "7.1.2",
    "babel-cli": "6.24.1",
    "babel-core": "6.25.0",
    "babel-loader": "7.1.1",
    "babel-polyfill": "6.23.0",
    "babel-preset-es2015": "6.24.1",
    "babel-preset-react": "6.24.1",
    "css-loader": "0.28.5",
    "file-loader": "0.11.2",
    "node-sass": "4.5.3",
    "postcss-loader": "2.0.6",
    "sass-loader": "6.0.6",
    "style-loader": "0.18.2",
    "url-loader": "0.5.9",
    "webpack": "3.5.5"
  },
  "babel": {
    "presets": [
      "react",
      "es2015"
    ]
  }
}

I've enabled HRM in the Startup:

                app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
                {
                    HotModuleReplacement = true,
                    ReactHotModuleReplacement = true
                });

I've tried deleting the node_modules folder, but that did not help. Any idea what's wrong here?

*Originally created by @QuantumHive on 8/22/2017* I've been migrating my `asp netcore 1.1` app to `2.0`. Previously I didn't enable and configure HRM, because I thought it wouldn't work. Well since I'm already in the migrating process, I thought to give it a try, but unfortunately my expectations were right, it doesn't work that well. When I followed the [docs](https://github.com/aspnet/JavaScriptServices/tree/dev/src/Microsoft.AspNetCore.SpaServices#webpack-hot-module-replacement) and enabled HRM, all seemed to work fine, but suddenly (the second time I tried to run my app) I got this error: > fail: Microsoft.AspNetCore.NodeServices[0] > Hash: 17bde93669f36e97cc41 > Version: webpack 3.5.5 > Time: 7252ms > Asset Size Chunks Chunk Names > 674f50d287a8c48dc19ba404d20fe713.eot 166 kB [emitted] > af7ae505a9eed503f8b8e6982036873e.woff2 77.2 kB [emitted] > fee66e712a8a08eef5805a46892932ad.woff 98 kB [emitted] > b06871f281fee6b241d60582ae9369b9.ttf 166 kB [emitted] > 912ec66d7572ff821749319396470bde.svg 444 kB [emitted] [big] > main.js 6.32 MB 0 [emitted] [big] main > [2] ./node_modules/react/react.js 56 bytes {0} [built] > [12] ./node_modules/react-redux/es/index.js 230 bytes {0} [built] > [37] ./node_modules/react-router-dom/es/index.js 925 bytes {0} [built] > [266] multi react-hot-loader/patch webpack-hot-middleware/client?path=__webpack_hmr&dynamicPublicPath=true ./index.js 52 bytes {0} [built] > [267] (webpack)-hot-middleware/client.js?path=__webpack_hmr&dynamicPublicPath=true 6.68 kB {0} [built] > [268] ./node_modules/querystring-es3/index.js 127 bytes {0} [built] > [271] ./node_modules/strip-ansi/index.js 161 bytes {0} [built] > [273] (webpack)-hot-middleware/client-overlay.js 1.82 kB {0} [built] > [278] (webpack)-hot-middleware/process-update.js 3.88 kB {0} [built] > [279] ./App/index.js 1.09 kB {0} [built] > [430] ./node_modules/bootstrap/scss/bootstrap.scss 1.26 kB {0} [built] > [432] ./node_modules/font-awesome/scss/font-awesome.scss 1.27 kB {0} [built] > [439] ./App/styles/spinner.scss 1.39 kB {0} [built] > [440] ./App/styles/app.scss 1.38 kB {0} [built] > [441] ./App/configureStore.js 561 bytes {0} [built] > + 516 hidden modules > > ERROR in multi react-hot-loader/patch webpack-hot-middleware/client?path=__webpack_hmr&dynamicPublicPath=true ./index.js > Module not found: Error: Can't resolve 'react-hot-loader/patch' in 'C:\dev\optimus\torque\supervisor\Optimus.Supervisor.Ui.Mvc\App' > @ multi react-hot-loader/patch webpack-hot-middleware/client?path=__webpack_hmr&dynamicPublicPath=true ./index.js This is my `webpack.config.js`: ``` const path = require("path"); const webpack = require("webpack"); const autoprefixer = require("autoprefixer"); module.exports = { resolve: { extensions: ["*", ".js"] }, context: path.resolve(__dirname, "./App"), entry: { main: "./index.js" }, output: { path: path.resolve(__dirname, "./wwwroot/dist"), publicPath: "/dist/", filename: "[name].js" }, devtool: "eval-source-map", plugins: [ new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify("development"), __DEV__: true }), new webpack.LoaderOptionsPlugin({ options: { postcss: () => [autoprefixer] } }) ], module: { rules: [ { test: /\.jsx?$/, exclude: /node_modules/, loaders: ["babel-loader"] }, { test: /\.eot(\?v=\d+.\d+.\d+)?$/, loader: "file-loader" }, { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" }, { test: /\.[ot]tf(\?v=\d+.\d+.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/octet-stream" }, { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=image/svg+xml" }, { test: /\.(jpe?g|png|gif)$/i, loader: "file-loader?name=[name].[ext]" }, { test: /\.ico$/, loader: "file-loader?name=[name].[ext]" }, { test: /(\.css|\.scss|\.sass)$/, use: [ "style-loader", { loader: "css-loader", options: { } }, { loader: "postcss-loader", options: { plugins: [autoprefixer] } }, { loader: "sass-loader", options: { //so we can use @import in the custom styles that are relative to the /styles folder includePaths: [path.resolve(__dirname, "./App/styles")] } } ] } ] } } ``` and my `package.json`: ``` { "name": "optimus.supervisor", "version": "1.0.0", "dependencies": { "aspnet-webpack-react": "^3.0.0", "axios": "0.16.2", "bootstrap": "4.0.0-beta", "font-awesome": "4.7.0", "lodash": "4.17.4", "moment": "2.18.1", "react": "15.6.1", "react-addons-css-transition-group": "15.6.0", "react-addons-transition-group": "15.6.0", "react-dom": "15.6.1", "react-redux": "5.0.6", "react-router": "4.1.2", "react-router-dom": "4.1.2", "react-router-redux": "4.0.8", "reactstrap": "4.8.0", "redux": "3.7.2", "redux-thunk": "2.2.0", "webpack-hot-middleware": "2.18.2" }, "devDependencies": { "aspnet-webpack": "2.0.1", "autoprefixer": "7.1.2", "babel-cli": "6.24.1", "babel-core": "6.25.0", "babel-loader": "7.1.1", "babel-polyfill": "6.23.0", "babel-preset-es2015": "6.24.1", "babel-preset-react": "6.24.1", "css-loader": "0.28.5", "file-loader": "0.11.2", "node-sass": "4.5.3", "postcss-loader": "2.0.6", "sass-loader": "6.0.6", "style-loader": "0.18.2", "url-loader": "0.5.9", "webpack": "3.5.5" }, "babel": { "presets": [ "react", "es2015" ] } } ``` I've enabled HRM in the `Startup`: ``` app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions { HotModuleReplacement = true, ReactHotModuleReplacement = true }); ``` I've tried deleting the `node_modules` folder, but that did not help. Any idea what's wrong here?

fergalmoran closed this issue

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

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/JavaScriptServices#481