Javascript React.createElement类型无效/未捕获错误：元素类型无效-与babel v7（@babel/core）中的require（组件）相关的错误

我知道这已经被问了好几次了，但我还是试了好几次

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

这就是我的App.jsx的样子

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

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

这是给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

好的，所以这个错误确实是由Requiremponent引起的。显然，新的Babel需要更多的信息，因为Babel威胁默认导出为命名导出，所以将其更改为requirecomponent.default就成功了

---

请共享您的listPage.jsx文件完成后，忽略listItems道具，忘记在此处添加它。您不需要将React包含在ReactJS.Net的导入中吗？比如：从'React'导入React，{Component}；？另外，再次共享IRFList.jsxDone的代码，它们都有一个加载检查，因为它们以前是从主页和路由器分离出来的。我所有的组件都有导出默认值，当它们分开时，一切似乎都正常工作。我所做的是将babel更新到最新版本，并尝试根据主页而不是单独的页面加载它们。

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>
        );
    }
}

//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>
        )
    }
}