Что значит ошибка Element type is invalid при рендеринге React-компонента

Ошибка появляется, когда React получает undefined вместо компонента. Основные причины:

1. Компонент не экспортирован или экспортирован неправильно Если ваш компонент Card находится в файле Card.jsx, убедитесь, что вы экспортируете его корректно:

   // default export
   export default function Card() {
     return <div>Card</div>;
   }
   
   // или named export
   export function Card() {
     return <div>Card</div>;
   }

   Expand code

2. Неправильный импорт

   • Для default export:
   import Card from './Card';

   Expand code
   • Для named export:
   import { Card } from './Card';

   Expand code

3. Проверка импорта Если импорт вызывает сомнения, можно распечатать объект:

   console.log(Card);

   Expand code

   Если вывод undefined, значит импорт или экспорт неверный.

4. Расширение файла Обычно .jsx можно опускать при импорте, если настройка сборщика поддерживает это. Главное — использовать правильный путь и совпадающий тип экспорта.

Итого: ошибка решается корректным экспортом компонента и соответствующим ему импортом.