React Webpack - Error: Module is not a loader (must have normal or pitch function)

Question

My webpack.config.js

var path = require("path")
var webpack = require('webpack')
var BundleTracker = require('webpack-bundle-tracker')

module.exports = {
    context: __dirname,

    entry: [
        'webpack-dev-server/client?http://localhost:3000',
        'webpack/hot/only-dev-server',
        './assets/js/index', // entry point of our app. assets/js/index.js should require other js modules and dependencies it needs
    ],

    output: {
        path: path.resolve('./assets/bundles/'),
        filename: "[name]-[hash].js",
        publicPath: 'http://localhost:3000/assets/bundles/', // Tell django to use this URL to load packages and not use STATIC_URL + bundle_name
    },

    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin(), // don't reload if there is an error
        new BundleTracker({filename: './webpack-stats.json'}),
    ],

    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loaders: ['react-hot-loader', 'babel-loader?presets[]=react'],
            }, // to transform JSX into JS
        ],
    },

    resolve: {
        modules: ['node_modules', 'bower_components'],
        extensions: ['.js', '.jsx']
    },
}

Error:

Error: Module 'C:\Workspace\PyCharmProjects\ProjectPearl\node_modules\react-hot-loader\index.js' is not a loader (must have normal or pitch function)

Looks like some got working (https://github.com/webpack/webpack/issues/3180) by adding -loader extension for modules, however for me it still doesn't resolve.

Please assist.

Mukesh Soni · Accepted Answer · 2020-10-15T06:47:35.067

31

The usage is react-hot-loader/webpack

loaders: ['react-hot-loader/webpack', 'babel-loader?presets[]=react'],

Look at some example usages here http://gaearon.github.io/react-hot-loader/getstarted/

edited Oct 15 '20 at 06:47

answered Jun 20 '17 at 04:30

Mukesh Soni

6,646
3
30
37

3

And in case people are using ES6 and get the same error, note that the [migration guide](https://github.com/gaearon/react-hot-loader/tree/master/docs#migration-to-30) reads as the first step: If you're using Babel and ES6, **remove the react-hot loader from any loaders in your Webpack config**, and add react-hot-loader/babel to the plugins section of your .babelrc: – voneiden Jul 10 '17 at 07:22

Techflash · Answer 2 · 2018-11-23T09:06:41.133

0

The issue may arise because of mismatched version of react-hot-loader dependent libraries. To ensure you have all react-hot-loader related dependencies configured correctly in package.json run following command.

npm install (if you have already installed all dependencies then this is not required)
npm remove --save-dev react-hot-loader
npm install --save react-hot-loader@<specific-version>

in my case specific-version was 1.3.1

edited Nov 23 '18 at 09:06

answered Nov 01 '18 at 18:28

Techflash

707
7
15

I was trying to add new library to package.json related to redux-saga but that did not work right so removed the library from package.json and then started getting this error. I am not sure how it happened but since then after spending whole day I got to know about this solution. – Techflash Nov 01 '18 at 18:32

React Webpack - Error: Module is not a loader (must have normal or pitch function)

2 Answers2