React.js：你可能需要一个合适的加载器来处理这个文件类型，目前没有配置加载器来处理这个文件答案

【问题标题】：React.js: You may need an appropriate loader to handle this file type, currently no loaders are configured to process this fileReact.js：你可能需要一个合适的加载器来处理这个文件类型，目前没有配置加载器来处理这个文件
【发布时间】：2020-08-18 09:37:30
【问题描述】：

我有一个包含 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, "public"),
        historyApiFallback: true
    }
};

我应该在module.rules 中添加webpack.config.js 这样的内容吗？：

{
    test: /\.jsx?$/,
    use: ["babel-loader"]
}

或者我需要另一个加载器吗？

【问题讨论】：

标签： javascript reactjs npm webpack

【解决方案1】：

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

【讨论】：