React.createElement type is invalid / Uncaught error: element type is invalid - Error related to require(COMPONENT) in babel v7 (@babel/core)

Question

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

我正在使用 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.

的要求

没有它，我会得到一个错误，例如 "window is not defined"，因为 SSR 不等待客户端加载。我还能在这里做些什么吗？为什么升级到 Babel V7 后我不能再使用 require (@babel/core)？

Answer 1

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

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

React.createElement type is invalid / Uncaught error: element type is invalid - Error related to require(COMPONENT) in babel v7 (@babel/core)

React.createElement type is invalid / Uncaught error: element type is invalid - Error related to require(COMPONENT) in babel v7 (@babel/core)

javascript

reactjs

reactjs.net

babeljs

babel-loader