React.createElement 类型无效/未捕获错误：元素类型无效 - 与 babel v7 (@babel/core) 中的 require(COMPONENT) 相关的错误答案

【问题标题】：React.createElement type is invalid / Uncaught error: element type is invalid - Error related to require(COMPONENT) in babel v7 (@babel/core)React.createElement 类型无效/未捕获错误：元素类型无效 - 与 babel v7 (@babel/core) 中的 require(COMPONENT) 相关的错误
【发布时间】：2018-11-26 13:10:44
【问题描述】：

我知道这个问题已经被问过很多次了，但是（再一次）我已经尝试了很多次。

我正在使用 ReactJS.NET 进行服务器端渲染和 React Router。

这就是我的 App.jsx 的样子

import ListPage from './pages/ListPage/ListPage.jsx';

<Route
    path="/list" component={ListPage}
/>

如果我尝试单击该路径的按钮，则会收到错误消息，例如：

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. 

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. 

bundle.js:48324 The above error occurred in the <div> component:
    in div (created by ListPage)
    in div (created by ListPage)
    in ListPage (created by Route)
    in Route (created by HomeComponent)
    in Switch (created by HomeComponent)
    in Router (created by BrowserRouter)
    in BrowserRouter (created by HomeComponent)
    in HomeComponent

我正在像这样导出我的组件 ->

export default class ListPage extends Component {

这是否与 ReactJS.NET 的 SSR 有关，或者我在这里遗漏了什么？我什至检查了我过去的项目（关于纯 JS 反应），我曾经以同样的方式定义路由......

这是我请求的 ListPage.jsx

import { Component } from 'react';
import NoSSR from 'react-no-ssr';

//let Shimmer;
let IRFList;
export default class ListPage extends Component {
    constructor(props) {
        super(props);

        this.state = {
            showIrfList: false,
        }
    }

    componentDidMount() {
        IRFList = require('./IRFList.jsx');
        this.setState({ showIrfList: true });
    }

    _getShimmerStyles = () => {
        return {
            shimmerWrapper: [
                {
                    backgroundColor: '#deecf9',
                    backgroundImage: 'linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #c7e0f4 50%, rgba(255, 255, 255, 0) 100%)'
                }
            ]
        };
    }
    render() {
        return (
            <div>
                <div className="appStart">
                    {
                        this.state.showIrfList ? <IRFList listItems={this.props.listItems} spToken={this.props.sharepointToken}/> : 
                        <NoSSR>
                            <div>Loading...</div>
                        </NoSSR>
                    }

                </div>
            </div>
        );
    }
}

这是针对 IRFList.jsx 的

//import * as React from 'react';
import React, { Component, Fragment } from 'react';
import { initializeIcons } from 'office-ui-fabric-react/lib/Icons';
import SharePointList from '../../components/list/sharepointList.jsx';
import './IRFList.css';

initializeIcons(/* optional base url */);

export default class ListItems extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isLoading: true,
        }
    }

    componentDidMount() {
        this.setState({ isLoading: false });
    }

    render() {
        const isLoading = this.state.isLoading;
        return (
            <div>
                {isLoading ?
                    <Fragment>
                    </Fragment>
                    :
                    <Fragment>
                        <SharePointList listItems={this.props.listItems} spToken={this.props.spToken}/>
                    </Fragment>
                }
            </div>
        )
    }
}

编辑：好的，所以问题很可能是因为我对 ListPage.jsx 的要求。

如果没有它，我会收到诸如“未定义窗口”之类的错误，因为 SSR 不会等待客户端加载。还有什么我可以在这里做的吗？为什么升级到 Babel V7 (@babel/core) 后我不能再使用 require 了？

【问题讨论】：

请分享您的 listPage.jsx 文件
完成，忽略 listItems 道具，忘记在此处添加。
你不需要在你的导入中包含React 和ReactJS.Net 吗？喜欢：import React, { Component } from 'react';?
另外，分享IRFList.jsx的代码
再次完成，他们都有一个“加载”检查，因为它们之前与主页（从路由器）分开。我所有的组件都具有导出默认值，并且在将它们分开时一切似乎都可以正常工作。我所做的是将 babel 更新到最新版本并尝试基于主页而不是单独的页面加载它们。

标签： javascript reactjs babeljs babel-loader reactjs.net

【解决方案1】：

好的，所以错误确实是因为require(component)。显然，新 Babel 需要更多信息，因为 Babel 威胁默认导出为命名导出，因此将其更改为 require(component).default 就可以了。

https://github.com/babel/babel/issues/9087

【讨论】：