Недопустимый тип React.createElement / неперехваченная ошибка: недопустимый тип элемента - ошибка, связанная с требованием (COMPONENT) в babel v7 (@ babel / core) - PullRequest
Новая
       10

Недопустимый тип React.createElement / неперехваченная ошибка: недопустимый тип элемента - ошибка, связанная с требованием (COMPONENT) в babel v7 (@ babel / core)

0 голосов
/ 26 ноября 2018

Я знаю, что об этом спрашивали несколько раз, но (еще раз) я пробовал все несколько раз.

Я использую 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 {

Это как-то связано с SSR от ReactJS.NET или я что-то здесь упускаю?Я даже проверил свои прошлые проекты (на чистом 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 не ожидает загрузки клиента.Есть ли что-то еще, что я мог бы сделать здесь?Почему я не могу больше использовать require после обновления до Babel V7 (@ babel / core)?

1 Ответ

0 голосов
/ 26 ноября 2018

Хорошо, ошибка действительно была из-за require(component).Очевидно, что новому Babel нужно немного больше информации, потому что Babel угрожает экспортам по умолчанию как именованным экспортам, поэтому изменив это значение на require(component).default, добился цели.

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

...