Can't resolve react-hot-loader/patch

Question

How i can resolve the error which is there in console. Any suggestion?

ERROR in multi (webpack)-dev-server/client?http://127.0.0.1:8888 webpack/hot/dev-server react-hot-loader/patch ./app/index.jsx dev Module not found: Error: Can't resolve 'dev' in '/Users/saorabh/Documents/react/reactExamples/youtube_video_api' @ multi (webpack)-dev-server/client?http://127.0.0.1:8888 webpack/hot/dev-server react-hot-loader/patch ./app/index.jsx dev

In my webpack config

"use strict";
var webpack     = require('webpack');
var path = require('path');
var loaders = require('./webpack.loaders');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var DashboardPlugin = require('webpack-dashboard/plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

const HOST = process.env.HOST || "127.0.0.1";
const PORT = process.env.PORT || "8888";

loaders.push({
    test: /\.css$/,
    loaders: ['style-loader', 'css-loader?importLoaders=1'],
    exclude: ['node_modules']
});

loaders.push({
    test: /\.scss$/,
    loaders: ['style-loader', 'css-loader?importLoaders=1', 'sass-loader'],
    exclude: ['node_modules']
});

module.exports = {
    entry: [
        'react-hot-loader/patch',
        './app/index.jsx', // your app's entry point
    ],
    devtool: process.env.WEBPACK_DEVTOOL || 'eval-source-map',
    output: {
        publicPath: '/',
        path: path.join(__dirname, 'public'),
        filename: 'bundle.js'
    },
    resolve: {
        extensions: ['.js', '.jsx']
    },
    module: {
        loaders
    },
    devServer: {
        contentBase: "./public",
        // do not print bundle build stats
        noInfo: true,
        // enable HMR
        hot: true,
        // embed the webpack-dev-server runtime into the bundle
        inline: true,
        // serve index.html in place of 404 responses to allow HTML5 history
        historyApiFallback: true,
        port: PORT,
        host: HOST
    },
    plugins: [
        new webpack.NoEmitOnErrorsPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new ExtractTextPlugin({
                filename: 'style.css',
                allChunks: true
        }),
        new DashboardPlugin(),
        new HtmlWebpackPlugin({
            template: './app/index.html',
            files: {
                css: ['style.css'],
                js: [ "bundle.js"],
            }
        })
    ]
};

in .bablelrc

{

  "presets": ["es2015", "react", "stage-0"],
  "plugins": ["react-html-attrs","transform-runtime", "transform-decorators-legacy", "transform-class-properties", "react-hot-loader/babel"]
}

App entry point

import 'react-hot-loader/patch';
import React from 'react';
import ReactDOM from 'react-dom';
import { AppContainer } from 'react-hot-loader'

import Application  from './components/app';

render((
  <AppContainer>
    <Application />
  </AppContainer>
), document.getElementById('app'));

I am new to react and when i was trying few examples i was getting this issue to thought for a help or suggestion.

In webpack loaders

module.exports = [
    {
      test: /\.es6\.js$/,
      exclude: /node_modules/,
      loader: 'babel-loader'
  },
    {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components|public\/)/,
        loader: "babel-loader"
    },
    {
        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
        exclude: /(node_modules|bower_components)/,
        loader: "file-loader"
    },
    {
        test: /\.(woff|woff2)$/,
        exclude: /(node_modules|bower_components)/,
        loader: "url-loader?prefix=font/&limit=5000"
    },
    {
        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
        exclude: /(node_modules|bower_components)/,
        loader: "url-loader?limit=10000&mimetype=application/octet-stream"
    },
    {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        exclude: /(node_modules|bower_components)/,
        loader: "url-loader?limit=10000&mimetype=image/svg+xml"
    },
    {
        test: /\.gif/,
        exclude: /(node_modules|bower_components)/,
        loader: "url-loader?limit=10000&mimetype=image/gif"
    },
    {
        test: /\.jpg/,
        exclude: /(node_modules|bower_components)/,
        loader: "url-loader?limit=10000&mimetype=image/jpg"
    },
    {
        test: /\.png/,
        exclude: /(node_modules|bower_components)/,
        loader: "url-loader?limit=10000&mimetype=image/png"
    }
];

user8572594 user8572594 · Accepted Answer · 2017-09-07T05:33:15

I also have the same problem, [email protected]

The solution is

npm i -D react-hot-loader@next

https://github.com/gaearon/react-hot-loader/tree/master/docs#migration-to-30

Can't resolve react-hot-loader/patch

1 Answers