React.js：您可能需要适当的加载器来处理此文件类型，当前没有配置任何加载器来处理此文件

如何解决React.js：您可能需要适当的加载器来处理此文件类型，当前没有配置任何加载器来处理此文件

我有一个带有React和Material Kit React框架的项目，我需要Material Kit React中的NavPills。但是，当我尝试运行npm服务器时，出现此错误：

ERROR in ./node_modules/material-kit-react/src/components/NavPills/NavPills.js 36:4
Module parse failed: Unexpected token (36:4)
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
|   });
|   const tabButtons = (
>     <Tabs
|       classes={{
|         root: classes.root,@ ./src/components/Store.js 13:16-78
 @ ./src/app.js

这很奇怪，因为我认为Tabs不需要装载程序。还是我错过了什么？

这是我的package.json：

{
    "name": "Front_KRIG","version": "1.0.0","main": "index.js","license": "MIT","scripts": {
        "serve": "live-server public/","build": "webpack","dev-server": "webpack-dev-server"
    },"dependencies": {
        "babel-cli": "^6.26.0","babel-core": "^6.26.3","babel-loader": "^7.1.5","babel-plugin-transform-class-properties": "^6.24.1","babel-preset-env": "^1.7.0","babel-preset-react": "^6.24.1","braces": "^3.0.2","css-loader": "^3.6.0","kind-of": "^6.0.3","live-server": "^1.2.1","material-kit-react": "^1.9.0","normalize.css": "^8.0.1","path": "^0.12.7","react": "^16.13.1","react-dom": "^16.13.1","react-modal": "^3.11.2","react-router-dom": "^5.2.0","sass-loader": "^8.0.2","style-loader": "^1.2.1","webpack": "^4.44.1","webpack-dev-server": "^3.11.0"
    },"devDependencies": {
        "node-sass": "^4.14.1","webpack-cli": "^3.3.12"
    }
}

webpack.config.js：

const path = require("path");

module.exports = {
    entry: "./src/app.js",output: {
        path: path.join(__dirname,"public"),filename: "bundle.js"
    },mode: "development",module: {
        rules: [
            { loader: "babel-loader",test: /\.js$/,exclude: /node_modules/ },{
                test: /\.s?css$/,use: ["style-loader","css-loader","sass-loader"]
            },]
    },devtool: "eval-cheap-module-source-map",devServer: {
        contentBase: path.join(__dirname,historyApiFallback: true
    }
};

我应该在webpack.config.js的{​​{1}}中添加这样的内容吗？：

module.rules

还是我需要另一个装载机？

解决方法

您的NavPills.js文件使用JSX，并且该错误指向的是JSX。解析器需要知道它正在处理JSX文件，而不仅仅是普通的JavaScript文件。通常，您可以使用扩展名.jsx而不是.js来做到这一点。