如何解决“您可能需要适当的加载程序来处理此文件类型，目前没有配置加载程序来处理此文件。”？

Question

我想在我的 React 项目中使用我通过 npm install 安装的包。但是当我在 index.jsx 中像这样从包中导入组件时：

import Header from "material-kit-react/src/components/Header/Header";

我在 webpack 构建器中收到以下错误消息：

ERROR in ./node_modules/material-kit-react/src/components/Header/Header.js 63:25
Module parse failed: Unexpected token (63:25)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     [classes.fixed]: fixed
|   });
>   const brandComponent = <Button className={classes.title}>{brand}</Button>;
|   return (
|     <AppBar className={appBarClasses}>
 @ ./client/App/Auth/Login/index.jsx 25:0-69
 @ ./client/App/Auth/index.jsx
 @ ./client/App/index.jsx
 @ ./client/index.jsx
 @ multi ./client/index webpack-hot-middleware/client?path=/__webpack_hmr&timeout=2000&overlay=false&reload=true
Child html-webpack-plugin for "index.html":

我的 webpack 配置如下所示：

const path = require('path')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: {
        app: [
            './client/index',
            'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=2000&overlay=false&reload=true'
        ]
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/'
    },
    resolve: {
        extensions: ['.js', '.jsx', '.json', '.scss'],
        modules: [
            'node_modules',
        ]
    },
    module: {
        rules: [{
            test: /\.m?js(x)?$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: [
                        '@babel/preset-env'
                    ]
                }
            }
        },{ test: /\.css$/, use: ['style-loader', 'css-loader'] },{
            test: /\.scss$/,
            use: [{
                loader: 'style-loader'
            }, {
                loader: 'css-loader',
                options: {
                    sourceMap: true
                }
            }, {
                loader: 'sass-loader',
                options: {
                    sourceMap: true
                }
            }]
        }]
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title: 'MyProject',
            template: path.resolve(__dirname, 'client', 'index.html'),
            filename: 'index.html'
        })
    ]
}

所以这似乎是使用 .js 文件的加载器设置的。如何正确导入这个包？

编辑： 当我像这样包含 material-kit-react 文件夹时

exclude: /node_modules\/(?!(material-kit-react)\/).*/,

在 babel-loader 中，似乎找到了 .js 文件。但它似乎被错误地解释了，我得到另一个错误：

ERROR in ./node_modules/material-kit-react/src/components/CustomButtons/Button.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/user1/Desktop/proj1/my-app/node_modules/material-kit-react/src/components/CustomButtons/Button.js: Unexpected token (51:4)

  49 |   });
  50 |   return (
> 51 |     <Button {...rest} ref={ref} className={btnClasses}>
     |     ^
  52 |       {children}
  53 |     </Button>
  54 |   );
    at Parser._raise (/Users/user1/Desktop/proj1/my-app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:742:17)
    at Parser.raiseWithData (/Users/user1/Desktop/proj1/my-app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:735:17)
    at Parser.raise (/Users/user1/Desktop/proj1/my-app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:729:17)
    at Parser.unexpected (/Users/user1/Desktop/proj1/my-app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:8757:16)
    at Parser.parseExprAtom (/Users/user1/Desktop/proj1/my-app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:10052:20)
    at Parser.parseExprSubscripts (/Users/user1/Desktop/proj1/my-app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:9602:23)
    at Parser.parseMaybeUnary (/Users/user1/Desktop/proj1/my-app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:9582:21)
    at Parser.parseExprOps (/Users/user1/Desktop/proj1/my-app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:9452:23)
    at Parser.parseMaybeConditional (/Users/user1/Desktop/proj1/my-app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:9425:23)
    at Parser.parseMaybeAssign (/Users/user1/Desktop/proj1/my-app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:9380:21)
    at Parser.parseParenAndDistinguishExpression (/Users/user1/Desktop/proj1/my-app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:10193:28)
    at Parser.parseExprAtom (/Users/user1/Desktop/proj1/my-app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:9947:21)
    at Parser.parseExprSubscripts (/Users/user1/Desktop/proj1/my-app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:9602:23)
    at Parser.parseMaybeUnary (/Users/user1/Desktop/proj1/my-app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:9582:21)
    at Parser.parseExprOps (/Users/user1/Desktop/proj1/my-app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:9452:23)
    at Parser.parseMaybeConditional (/Users/user1/Desktop/proj1/my-app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:9425:23)
 @ ./client/App/Landing/Landing.jsx 8:0-76 31:88-94
 @ ./client/App/Landing/index.jsx
 @ ./client/App/index.jsx
 @ ./client/index.jsx
 @ multi ./client/index webpack-hot-middleware/client?path=/__webpack_hmr&timeout=2000&overlay=false&reload=true

Answer 1

你有

exclude: /node_modules/,

在您的 babel-loader 配置中，因此 Babel 永远不会处理 node_modules 中的任何文件，这是 material-kit-react 所在的位置。

你的 Babel 配置也只有

'@babel/preset-env'

这对启用 JSX 支持没有任何作用。您还需要启用

'@babel/preset-react'