Что за ошибка в React?

Question

[Арсений Соловей]

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

7 | let state = store.getState()
   8 | 
>  9 | ReactDOM.render(
  10 |   <React.StrictMode>
  11 |     <React.Provider state={state}>
  12 |       <App />

Comments

[Gary_Ihar]

Так в описании ошибки все написано, не? Переведи в гугле

[Арсений Соловей]

Gary_Ihar, да, но все равно не понятно, где именно я не так сделал. Показывает именно этот фрагмент кода

[Gary_Ihar]

Арсений Соловей, ну если в рамках предоставленного фрагмента кода, то с 7 по 12 строку с виду все норм.

[Steppp]

Арсений Соловей, Напиши в 8 строке, console.log(state) - смотри что там за ошибка

[Арсений Соловей]

Steppp,

Object
  todo:
    todos: (3) [{…}, {…}, {…}]
    __proto__: Object
  __proto__: Object

[TRNER]

Арсений Соловей, покажи всю функцию ReactDOM.render?

[Александр]

Код App предоставьте.

[Арсений Соловей]

TRNER,

ReactDOM.render(
  <React.StrictMode>
    <React.Provider state={state}>
      <App />
    </React.Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

[Арсений Соловей]

Александр,

import React, { Suspense } from 'react';
import './App.scss';
import Header from './components/Header/Header';
import { Route, BrowserRouter } from 'react-router-dom';

let TodoLazy = React.lazy(() => import('./components/Todo/TodoContainer'))

function App(props) {
  return (
    <BrowserRouter>
      <div className="container">
        <Header />
        <main>
          <Suspense>
            <Route render={<TodoLazy />} path='/todo' />
          </Suspense>
        </main>
      </div>
    </BrowserRouter>
  );
}

export default App;

[Александр]

Арсений Соловей, Если закомментировать

let TodoLazy = React.lazy(() => import('./components/Todo/TodoContainer'))

и вместо <Route render={<TodoLazy />} path='/todo' /> вписать это <Route render={<p>Hello World</p>} path='/todo' /> что-то изменится?

[Арсений Соловей]

Александр, нет

[Александр]

Арсений Соловей, Проверяйте экспорты, которые меняли в прошлый раз. Возможно Вы 2 экспорта сделали, или был именованный, а после подключили Redux и сделали export default, а в импорте/ре-экспорте поменять забыли.

[Арсений Соловей]

Александр, я неправильно импортировал Provider .Спасибо всем за помощь

Answer 1

[ReactLover]

Компонента React.Provider не существует, откуда ты его взял вообще? Это экспортируемый тип.

Comments

[Арсений Соловей]

перепутал импорт, в react-redux есть https://react-redux.js.org/api/provider

Answer 2

[Игорь Тимошенков]

Если вот прям дословно переводить:

Ошибка: тип элемента недействителен: ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получено: undefined. Скорее всего, вы забыли экспортировать свой компонент из файла, в котором он определен, или вы могли перепутать импорт по умолчанию и именованный импорт.

А чтобы починить можно попробовать следующее:

• отключить `React.StrictMode` (удалить соответствующий тег или закомментировать)
  
• проверить `export` всех своих компонентов
  

Comments

[Арсений Соловей]

попробовал, ничего не изменилось