React Webpack - 错误: 模块不是一个加载器（必须具有normal或pitch函数）

Question

我的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']
    },
} 

错误：

错误：模块'C:\Workspace\PyCharmProjects\ProjectPearl\node_modules\react-hot-loader\index.js'不是一个加载器（必须具有普通或pitch函数）

看起来有些人通过为模块添加-loader扩展名使其工作（https://github.com/webpack/webpack/issues/3180），但对我来说仍然无法解决。

请协助处理。

- theblackpearl

Answer 1

使用方式是 react-hot-loader/webpack

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

在这里查看一些示例用法 http://gaearon.github.io/react-hot-loader/getstarted/

- Mukesh Soni

---

如果有人在使用ES6时遇到相同的错误，请注意迁移指南中的第一步骤：如果你正在使用Babel和ES6，请从Webpack配置中的任何加载器中删除react-hot loader，并将react-hot-loader/babel添加到.babelrc文件的插件部分。 - voneiden

Answer 2

问题可能是由于 react-hot-loader 依赖库版本不匹配导致的。为了确保您在 package.json 中正确配置了所有与 react-hot-loader 相关的依赖项，请运行以下命令。

• npm install（如果您已经安装了所有依赖项，则无需执行此操作）
• npm remove --save-dev react-hot-loader
• npm install --save react-hot-loader@<specific-version>

在我的情况下，specific-version 是 1.3.1。

- Techflash

---

我试图将与redux-saga相关的新库添加到package.json中，但是它没有正常工作，因此从package.json中删除了该库，然后开始出现此错误。我不确定它是如何发生的，但是在整整一天的努力之后，我终于找到了这个解决方案。 - Techflash