未为node_modules配置装载程序| webpack + babel

Question

我正在尝试从我的项目中声明为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！

Answer 1

[令人惊讶的是，当您在presets中提供.babelrc时，如果您要排除node_modules中的任何内容，则无法正常工作，但是当我将预置放入webpack.config中时，它就像宝石一样工作。因此，我建议尝试保持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"
         ]
       }
    }
}

希望这会有所帮助。