在React中解析JSX但在依賴項中不解析（webpack，babel）

Question

我有一個使用JSX的React應用程序，在導入一個也使用JSX的依賴項之前，它可以正常工作，這時我收到以下錯誤消息：

ERROR in ./node_modules/simple-test-react-app/src/Component.js 9:9
Module parse failed: Unexpected token (9:9)
You may need an appropriate loader to handle this file type.
| 
|   render() {
>       return <div>I'm a super simple thing!</div>
|   }
| }
 @ ./src/App.js 4:0-46
 @ multi (webpack)-dev-server/client?http://localhost:3101 ./src/App.js

有趣的是，除了依賴關系之外，JSX可以很好地進行解析。 我懷疑這可能與webpack和/或babel的配置有關，但是經過長時間的搜索，我還是一如既往地迷路。 我還可能需要修復依賴項中的某些內容（這也是我的）。

這是一個顯示問題的准系統應用github存儲庫的鏈接 。 這是依賴關系的鏈接 。 為簡單起見，我還在下面包括了一些代碼段（來自父級，而不是依賴項）：

App.js （如果我刪除了第三個import語句，則可以很好地解析）

import React from "react";
import ReactDOM from "react-dom";

//Problem is here. The problem goes away when this is commented out.
import Component from "simple-test-react-app";

ReactDOM.render(<div>Hello world</div>, document.getElementById("app"));

Webpack.config.js

const path = require("path");
const port = 3101;
const APP_DIR = path.resolve(__dirname, "src");

const config = {
    entry: [
        APP_DIR + "/App.js",
    ],
    output: {
        filename: "app.[contenthash].js",
    },
    mode: "development",
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                },
            },
        ],
    },
    resolve: {
        extensions: [
            "*",
            ".js",
        ],
    },
    devServer: {
        compress: true,
        port: port,
    },
};

module.exports = config;

任何幫助將不勝感激。

Answer 1

Babel由於exclude: /node_modules/而不會處理您的依賴exclude: /node_modules/ 。 刪除它，它應該工作。