没有为 node_modules 配置加载器 |网络包+巴别塔

No loaders configured for node_modules | webpack + babel

我正在尝试从我的项目中声明为 devDependency 的模块加载 JSX 组件。但是,在 运行 webpack 上,我收到以下错误:

Module parse failed: Unexpected token (70:20)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. 

|
|                 render(
>                     <Provider store={store}>
|                         <MyApp />
|                     </Provider>,
 @ ./src/App.js 48:43-96
 @ ./src/index.js

我正在使用 webpack 4 和 babel 7。

webpack 依赖项:

"devDependencies": {
    "@babel/core": "^7.9.6",
    "@babel/preset-env": "^7.9.6",
    "@babel/preset-react": "^7.9.4",
    "dummy-pkg": "file:../dummy-pkg",
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^8.2.3",
    "babel-loader": "^7.1.2",
    "sass-loader": "^8.0.0",
    "style-loader": "^0.16.1",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "webpack": "^4.40.2",
    "webpack-cli": "^3.3.10"
}

webpack 配置:

module: {
    rules: [
        {
            test: /\.jsx?$/,
            include: [path.resolve(__dirname, './src'), /node_modules\/dummy-pkg/],
            use: 'babel-loader'
        },
        {
            test: /\.scss$/,
            use: ['style-loader', 'css-loader', 'sass-loader']
        }
    ]
 }

babelrc

{
  "presets": ["@babel/preset-react", "@babel/preset-env"]
}

当我尝试从 dummy-pkg 导入组件时,它失败并显示我上面提到的错误消息。

如果我删除导入,我当前项目中声明的所有其他 JSX 组件都会正确转译。引入这个会导致所有问题。

我一直在查看有关 Stack Overflow 的许多其他问题以及一些 GitHub 问题。那里建议的解决方案似乎不适合我。

任何帮助将不胜感激。 TIA!

更新

经过一番调试,发现需要在babel.config.json

中定义babel config

更多信息可用here. Other File types are listed here

令人惊讶的是,我注意到当您在 .babelrc 中提供 presets 时,如果您想要从 node_modules 中排除任何内容,它就无法正常工作,但是当我放置预设时在我的 webpack.config 中,它像 gem 一样工作。所以我建议尝试保持 js or jsx 的规则如下所示并测试

{
    test: /\.(js|jsx)$/,
    exclude: [/node_modules\/dummy-pkg/],
    use: {
      loader: "babel-loader",
      options: {
         presets: ["@babel/preset-env", "@babel/preset-react"],
         plugins: [
           "@babel/plugin-proposal-class-properties"
         ]
       }
    }
}

希望对您有所帮助。