Я пытаюсь использовать 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
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.





Вот очень простой пример, который должен работать с похожими зависимостями.
Я бы рекомендовал убедиться, что import('./_header') разрешает правильный модуль, чтобы еще раз проверить, есть ли экспорт по умолчанию и что это тип компонента React. Кроме того, убедитесь, что { fallback } для компонента саспенса также относится к компонентному типу.
Когда я поделился кодом, мой заголовок является базовым компонентом класса реакции и экспортирует по умолчанию! что в этом плохого ?
Связана ли эта заметка с этой ошибкой? Примечание. React.lazy () и <React.Suspense> еще не поддерживаются ReactDOMServer. Это известное ограничение, которое будет устранено в будущем.
Да, <React.Suspense> не работает с renderToString от react-dom/server (SSR), но, похоже, вы получаете какую-то другую ошибку. Ваш пример кажется прекрасным, поэтому, должно быть, упускается из виду небольшая деталь ?.
Я нашел проблему! React-dom не был в правильной версии, поэтому я обновил его до 16.6.3 и некоторых других зависимостей. Я думал, обновив реакцию, будут обновлены другие зависимости, но это неправильно! Большое спасибо, кстати :)
Suspense and lazy доступны в следующих версиях:
"react": "^16.6.3"
"react-dom": "^16.6.3"
Эта ошибка связана с react-dom, который не был правильно обновлен!
Я добавил Fall back, но все равно получаю ту же ошибку. Думаю, это из-за обновления React. Я тестировал это в новом приложении, и он отлично работает. Но в моем текущем проекте это вызывает эту ошибку.