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

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

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
4
0
2 058
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

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

Edit lazy-header

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

Я добавил Fall back, но все равно получаю ту же ошибку. Думаю, это из-за обновления React. Я тестировал это в новом приложении, и он отлично работает. Но в моем текущем проекте это вызывает эту ошибку.

Afsanefda 16.12.2018 07:25

Когда я поделился кодом, мой заголовок является базовым компонентом класса реакции и экспортирует по умолчанию! что в этом плохого ?

Afsanefda 16.12.2018 07:27

Связана ли эта заметка с этой ошибкой? Примечание. React.lazy () и <React.Suspense> еще не поддерживаются ReactDOMServer. Это известное ограничение, которое будет устранено в будущем.

Afsanefda 16.12.2018 07:54

Да, <React.Suspense> не работает с renderToString от react-dom/server (SSR), но, похоже, вы получаете какую-то другую ошибку. Ваш пример кажется прекрасным, поэтому, должно быть, упускается из виду небольшая деталь ?.

Filip Dupanović 16.12.2018 10:02

Я нашел проблему! React-dom не был в правильной версии, поэтому я обновил его до 16.6.3 и некоторых других зависимостей. Я думал, обновив реакцию, будут обновлены другие зависимости, но это неправильно! Большое спасибо, кстати :)

Afsanefda 16.12.2018 10:05
Ответ принят как подходящий

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

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

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

Другие вопросы по теме