React.js：你可能需要一個合適的加載器來處理這種文件類型，目前沒有配置加載器來處理這個文件

Question

我有一個帶有 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"]
}

或者我需要另一個裝載機嗎？

Answer 1

您的NavPills.js文件使用 JSX，錯誤指向的是 JSX。 解析器需要知道它正在處理一個 JSX 文件，而不僅僅是一個普通的 JavaScript 文件。 通常，您使用擴展名.jsx而不是.js來做到這一點。