ERROR in multi main Module not found: Error: Cannot resolve module 'webpack-hot-middleware/client'?


#1

Even though already installed ‘webpack-hot-middleware’ it still says

Module not found: Error: Cannot resolve module ‘webpack-hot-middleware/client’

package.json:

"devDependencies": {
    "autoprefixer": "^6.3.6",
    "babel": "^6.3.26",
    "babel-core": "^6.3.26",
    "babel-loader": "^6.2.0",
    "babel-plugin-add-module-exports": "^0.1.2",
    "babel-plugin-react-transform": "^2.0.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.2",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "babel-preset-stage-0": "^6.3.13",
    "css-loader": "^0.23.0",
    "expose-loader": "^0.7.1",
    "extract-text-webpack-plugin": "^0.9.1",
    "file-loader": "^0.8.5",
    "html-webpack-plugin": "^2.19.0",
    "json-loader": "^0.5.4",
    "less": "^2.3.1",
    "less-loader": "^2.2.2",
    "postcss-loader": "^0.9.1",
    "react-bootstrap-datetimepicker": "0.0.22",
    "react-transform-catch-errors": "^1.0.0",
    "react-transform-hmr": "^1.0.1",
    "redbox-react": "^1.2.0",
    "style-loader": "^0.13.0",
    "url-loader": "^0.5.7",
    "webpack": "^1.13.0",
    "webpack-dev-server": "^1.14.1",
    "webpack-hot-middleware": "^2.10.0"

webpack.config.js:

var webpack = require('webpack');

module.exports = {
    devtool: 'eval-source-map',
    entry: __dirname + "/client/routes.jsx",
    output: {
        path: __dirname + "/build",
        filename: "bundle.js"
    },
    resolve: {
        extensions: ['', '.js', '.jsx']
    },
    module: {
        loaders: [

            {
                test: /\.json$/,
                loader: "json"
           },

            {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel'
        },
        {
            test: /\.css$/,
            loader: 'style!css?modules!postcss'
        },
        {
            test: /\.jsx$/,
            loader: 'babel',
            exclude: /node_modules/,
            query: {
                cacheDirectory: true,
                presets: ['react', 'es2015']
            }
        }
    ]
},
    postcss: [
        require('autoprefixer')
    ],


    plugins: [
        new webpack.BannerPlugin("Copyright Flying Unicorns inc.")
    ],
    devServer: {
        contentBase: "./build",
        colors: true,
        historyApiFallback: true,
        inline: true
    }



}