react-hot-loader and webpack not working

Question

After spending days on this, am throwing this up for help.

Trying to compile webpack 3.5.5 and react-hot-loader 1.3.1 and getting these errors:

ERROR in multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server babel-polyfill react-hot-loader/patch ./src/entry.js Module not found: Error: Can't resolve 'react-hot-loader/patch' in '/home/terry/myProjects/PWA/apps-dev' @ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server babel-polyfill react-hot-loader/patch ./src/entry.js

ERROR in multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server babel-polyfill react-hot-loader/patch ./src/entry.js Module not found: Error: Can't resolve 'react-hot-loader/webpack' in '/home/terry/myProjects/PWA/apps-dev' @ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server babel-polyfill react-hot-loader/patch ./src/entry.js

I've been following instructions (or so I thought) online to set up following config file:

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const sourcePath = path.join(__dirname, './src');
const publicPath = path.join(__dirname, './public')
const distPath = path.join(__dirname, './public/dist/');
const ExtractTextPlugin = require("extract-text-webpack-plugin");

//for the code shared amongst modules
const extractCommons = new webpack.optimize.CommonsChunkPlugin({
  names: ['vendor', 'manifest'], //specify the common bundle's name
  minChunks: function (module) {  //accept only vendor libraries 
    // this assumes your vendor imports exist in the node_modules directory
    return module.context && module.context.indexOf('node_modules') !== -1;
  }
});


module.exports = env => {
  const isProd = env.prod ? true : false;

  return {
    cache: false,
    entry: [
       'babel-polyfill',
       'react-hot-loader/patch',
       // 'webpack-dev-server/client?http://localhost:3000',
       // 'webpack/hot/only-dev-server',
       sourcePath + '/entry.js'
    ],

    output: {
      filename: '[name].js',  //don't use hash in dev
      path: publicPath,  //where to store the bundled files
      publicPath: '/'
    },

    devtool: 'inline-source-map',

    module: {
    rules: [
     {
      test: /(\.js|\.jsx)$/,
        loaders: ['react-hot-loader/webpack', 'babel'],
        exclude: /node_modules/
      },
      {
        test: /\.html$/,
        exclude: /node_modules/,
        loader: 'file-loader',
        query: {
          name: '[name].[ext]'
        }
      },

      {
          test: /\.svg/,
          use: {
              loader: 'svg-url-loader',
              options: {}
          }
      },
      {
        test: /\.(jpg|png)$/,
        loader: 'url-loader',
        options: {
          limit: 25000,
        },
      },

      {
        test: /(\.scss|\.css)$/,
        loader: ExtractTextPlugin.extract({fallback: 'style-loader', use: 'css-loader?sourceMap!resolve-url-loader!sass-loader?sourceMap'})
      }
    ]
  },
  resolve: {
    alias: {
      components:  path.resolve(__dirname, 'src', 'components'),
      navigation:  path.resolve(__dirname, 'src', 'navigation'),
      reducers:    path.resolve(__dirname, 'src', 'reducers'),
      actions:     path.resolve(__dirname, 'src', 'actions'),
      routes:      path.resolve(__dirname, 'src', 'routes'),
      utils:       path.resolve(__dirname, 'src', 'utils'),
      styles:      path.resolve(__dirname, 'src', 'styles'),
      images:      path.resolve(__dirname, 'public', 'images')
    },
    extensions: ['.webpack-loader.js', '.web-loader.js', '.loader.js', '.js', '.jsx'],
    modules: [
      path.resolve(__dirname, 'node_modules'),
      sourcePath
    ]
  },

  devServer: {
    host: 'localhost',
    port: 3000,
    contentBase: './public/',
    historyApiFallback: true,
    // respond to 404s with index.html

    hot: true,
    // enable HMR on the server
  },

   plugins: [
    new webpack.HotModuleReplacementPlugin(),
    // enable HMR globally

    new webpack.NamedModulesPlugin(),
    // prints more readable module names in the browser console on HMR updates

    new webpack.NoEmitOnErrorsPlugin(),
    // do not emit compiled assets that include errors


    extractCommons,
    //css files

    new ExtractTextPlugin('shared.css'),

    new HtmlWebpackPlugin({
        template: 'index.template.ejs',
        inject: 'body',
    })

  ],
}
}

Here is my .babelrc file:

    {
  "presets": [
    [
      "latest", {
        "es2015": {
          "modules": false
        }
      }
    ],
    "react",
    "stage-2"
  ],
  "plugins": [
  "transform-object-rest-spread",
    "react-hot-loader/babel-loader"
  ]
}

and my entry file:

import 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import { AppContainer } from 'react-hot-loader';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware, compose } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension/developmentOnly';
import { responsiveStoreEnhancer } from 'redux-responsive';
import reduxThunk from 'redux-thunk';
import reducers from './reducers';
import App from 'routes/App';
import injectTapEventPlugin from 'react-tap-event-plugin';

// Needed for onTouchTap
// http://stackoverflow.com/a/34015469/988941
injectTapEventPlugin();


const composeEnhancers = composeWithDevTools({});

const store = createStore(
  reducers,
  composeEnhancers(
    responsiveStoreEnhancer,
    applyMiddleware(
      reduxThunk
    ))
);

ReactDOM.render(
  <AppContainer>
  <Provider store={store} >
     <App />
   </Provider> 
  </AppContainer>
, document.getElementById('root')
);

// Hot Module Replacement API
if (module.hot) {
  module.hot.accept('routes/App', () => { render(
    <AppContainer>
  <Provider store={store} >
     <App />
   </Provider> 
  </AppContainer>) 
})
}

The problem is that the docs online are skimpy because they are re-doing everything. Can anybody help me? I'm so confused now I don't know which way is up.

Answer 1

You're attempting to use v3 configuration whilst using the v1 package. You should upgrade your package to v3.

npm install --save react-hot-loader@next

or

yarn install --save react-hot-loader@next

Answer 2

In Your package.json to add below this command:

"scripts": {
"start": "webpack-dev-server --hot"
}