How to run React-hot-loader on webpack 2 with webpack-dev-middleware?

Question

JavaScript

I can't set up webpack with react-hot-loader Errors keep popping up..

ERROR in ./src/main.js
Module build failed: ReferenceError: Unknown plugin "react-hot-loader/babel"
ERROR in multi react-hot-loader/patch webpack-hot-middleware/client ./src/main.js
Module not found: Error: Can't resolve 'react-hot-loader/patch'

webpack itself:

const webpack = require('webpack');
const path = require('path');

const rules = [
  {
    test: /\.(js|jsx)$/,
    exclude: /node_modules/,
    use:[
      {
        loader: 'babel-loader',
        options: {
          plugins: ['react-hot-loader/babel'],
        }
      }
    ]
  }
];

const plugins = [
    new webpack.HotModuleReplacementPlugin()
];

module.exports = {
  devtool: 'source-map',
  entry: {
    app:[
      'react-hot-loader/patch',
      'webpack-hot-middleware/client',
      './src/main.js'
    ]
  },
  output: {
    filename: '[name].bundle.js',
    	publicPath: '/',
        path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules
  },
  resolve:{
    extensions:['.js', '.jsx'],
  },
  plugins
}

app.js

app.use(webpackDevMiddleware(compiler,{
  stats:{
    colors: 	true,
        hash: 		false,
        timings: 	true,
        chunks: 	false,
        chunkModules: false,
        modules: 	false
  }
}));
app.use(webpackHotMiddleware(compiler));

.babelrc:

{
  "presets": ,
  "plugins": ["react-hot-loader/babel"]
}

main.js

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

import App from './components/App'

const render = Component => {
  ReactDOM.render(
    <AppContainer>
      <Component />
    </AppContainer>,
    document.getElementById('root')
  )
}

render(App)

if (module.hot) {
  module.hot.accept('./containers/App', () => { render(App) })
}

What is the problem?

Answer 1

Unknown plugin "react-hot-loader/babel"