如何解决"You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file."？

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'

如何解决"You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file."？

How to resolve "You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file."?

reactjs

webpack

babeljs

babel-loader