Uncaught Invariant Violation：元素类型无效（react、webpack、循环导入）答案

【问题标题】：Uncaught Invariant Violation: Element type is invalid (react, webpack, circular imports)Uncaught Invariant Violation：元素类型无效（react、webpack、循环导入）
【发布时间】：2023-03-17 00:36:01
【问题描述】：

首先，我想说我是 javascript 新手，如果我的问题很琐碎，但我无法弄清楚这种情况，请提前做出反应。如果需要，我会更新帖子。

我想将我当前的应用程序迁移到单页应用程序。我有 3 个主要页面 PageA、PageB 和 PageC（在反应中我有 3 个主要组件）。我希望能够在这 3 个页面/组件之间切换。假设我有这个 LogoText，它是代表网站徽标的组件。我想将它放在所有其他组件（包括 PageA ）中，当我单击它时，我想呈现主页（ PageA ）。

所以我试图用 react 和 webpack 来构建它。在下面给出的这个简单示例中，我有一个主页组件 MainPage.js，它是应该在主页中的所有组件的父组件和一个 LogoText 组件，当有人单击它时应该呈现 MainPage 组件。当所有这些组件都在一个文件中并且我不使用 require() 时，一切正常，但是当我使用 require() 将我的应用程序分解为模块并打包时它与 webpack 我得到奇怪的行为。我可以加载 MainPage 组件，并且 LogoText 组件在 MainPage 中正确显示，但是当我单击 LogoText 时，我得到“Uncaught Invariant Violation: Element type is invalid”异常 (click for screenshot)

第一个例外：
react.js:18798 警告：React.createElement：类型不应为 null、未定义、布尔值或数字。它应该是字符串（用于 DOM 元素）或 ReactClass（用于复合组件）。

第二个例外：
react.js:18354 Uncaught Invariant Violation：元素类型无效：期望字符串（对于内置组件）或类/函数（对于复合组件），但得到：对象。

我有以下 3 个课程：

main.js：

var MainPage = require("./MainPage.js")

ReactDOM.render(
   <MainPage />,
   document.getElementById('content')
);

MainPage.js：

var LogoText = require("./LogoText.js")

var MainPage = React.createClass({

    render: function() {
        return (
            <div>
                Hello page,
                <LogoText />
            </div>
        );
    }
});

module.exports = MainPage;

LogoText.js

var MainPage = require("./MainPage.js")

var LogoText = React.createClass({

    changePage: function(e) {
        ReactDOM.render(
            <MainPage />,
            document.getElementById('content')
        );
    },

    render: function() {
        return (
            <span onClick={this.changePage}>logo</span>
        );
    }
});

module.exports = LogoText;

index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>React Tutorial</title>
    <!-- Not present in the tutorial. Just for basic styling. -->
    <link rel="stylesheet" href="css/base.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.16/browser.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.min.js"></script>
  </head>
  <body>
    <div id="content"></div>
    <script src="scripts/bundle.js"></script>
  </body>
</html>

更新 1：这是我的 webpack.config.js：

module.exports = {
    entry: "./src/scripts/main.js",
    output: {
        path: "./src/scripts",
        filename: "bundle.js"
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style!css" },
            { test: /\.js$/, loader: 'jsx-loader?insertPragma=React.DOM&harmony'},
        ]
    },
    externals: {
        //don't bundle the 'react' npm package with our bundle.js
        //but get it from a global 'React' variable
        'react': 'React'
    },
    resolve: {
        extensions: ['', '.js', '.jsx']
    }
};

【问题讨论】：

发布 webpack.config.js，我在反应代码中没有看到明显的错误
我已经更新了粘贴我的“webpack.config.js”文件内容的帖子
ReactDOM.render 不应该在 LogoText 中。你不是“在 React 中思考”。
是的错过了那个，那不好..
好的，那么我应该如何从 LogoText 呈现 MainPage ？我已经尝试以完全相同的方式使用 ReactDOM.render 渲染另一个页面并且它正在工作。仅在这种情况下存在问题。我猜是因为循环 require()

标签： javascript reactjs export webpack require

【解决方案1】：

好吧，显然我的直觉是正确的“我猜是因为循环 require()”。答案在这里：“circular imports with webpack returning empty object”。

我认为react router 将是实现这一点的正确方法。我会尝试一下，稍后我会在这里发布结果 :)

更新 1：
React 路由器正是我正在寻找的。 This is the exact tutorial that solved my problem.

【讨论】：