Тип элемента недопустим: ожидал строку (для встроенных компонентов) или класс / функцию (для составных компонентов), но получил: символ

Question

Я пытаюсь использовать lazy Loading для своего приложения.

index.js

import React, { Suspense , lazy , Component } from 'react';
import ReactDOM from 'react-dom';
import 'index.scss';
import SomeComponent from './someComponent.js';
import * as serviceWorker from 'serviceWorker';

ReactDOM.render(<SomeComponent />, document.getElementById('root'));
serviceWorker.unregister();

некоторый компонент index.js file *

import React, { Suspense , lazy , Component } from 'react';
import { BrowserRouter } from 'react-router-dom';
const Header = lazy(() => import('./_header'));

class SomeComponent extends Component {
  render() {
    return (
      <BrowserRouter>
          <React.Fragment>
            <Suspense>
              <Header />
            </Suspense>
          </React.Fragment>
      </BrowserRouter>
    );
  }
}

export default SomeComponent;

заголовочный файл index.js

import React, { Component } from 'react';
import './index.scss';

class Header extends Component {
    render() {
        return (
            <h1>Header</h1>
        );
    }
}
export default Header;

Но у меня есть эта ошибка:

Недопустимый тип элемента:ожидал строку (для встроенных компонентов) или класс / функцию (для составных компонентов), но получил: символ.

Моя версия реакции v16.6.3 .

Answer 1

Suspense and lazy доступны в следующих версиях:

"react": "^16.6.3"
"react-dom": "^16.6.3"

Эта ошибка относится к react-dom, который был обновлен неправильно!

Answer 2

Вот очень простой пример, который должен работать с использованием аналогичных зависимостей.

Я бы порекомендовал убедиться, что import('./_header') разрешается в правильный модуль, чтобы еще раз проверить, существует ли экспорт по умолчанию и что это тип компонента React.Кроме того, убедитесь, что { fallback } для компонента ожидания также является типом компонента.