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 React上），并且我以前用相同的方式定义路线...

这是我要求的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）后，为什么不能再使用需求？

Answer 1

好的，所以错误的确是由于require(component)造成的。显然，新的Babel需要更多信息，因为Babel威胁将默认出口作为命名出口，因此将其更改为require(component).default可以解决问题。

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

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

1 个答案: