React Webpack - 错误:模块不是加载器(必须具有正常或俯仰功能)

Posted

技术标签:

【中文标题】React Webpack - 错误:模块不是加载器(必须具有正常或俯仰功能)【英文标题】:React Webpack - Error: Module is not a loader (must have normal or pitch function) 【发布时间】:2017-11-22 10:44:32 【问题描述】:

我的 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' 不是装载机(必须有正常或俯仰功能)

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

请帮忙。

【问题讨论】:

【参考方案1】:

用法是react-hot-loader/webpack

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

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

【讨论】:

如果人们使用 ES6 并遇到同样的错误,请注意 migration guide 读取为第一步:如果您使用 Babel 和 ES6,删除 react-hot从你的 Webpack 配置中的任何加载器加载加载器,并将 react-hot-loader/babel 添加到 .babelrc 的插件部分:【参考方案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>

在我的情况下,特定版本是 1.3.1

【讨论】:

我试图将新库添加到与 redux-saga 相关的 package.json 中,但这不起作用,因此从 package.json 中删除了该库,然后开始出现此错误。我不确定它是怎么发生的,但从那以后我花了一整天的时间才知道这个解决方案。

以上是关于React Webpack - 错误:模块不是加载器(必须具有正常或俯仰功能)的主要内容,如果未能解决你的问题,请参考以下文章

React + Webpack HMR 正在刷新页面(不是热加载)

Webpack + `create-react-app` | ProvidePlugin 未将 React 作为模块加载

检查 Webpack 中是不是已加载模块?

错误:无法解析模块“样式加载器”

React / Webpack - “模块解析失败:意外令牌 - 您可能需要适当的加载程序来处理此文件类型。”

react路由懒加载,路由配置化,webpack自动导入saga文件--后台定义配置式路由