Vite.js + TS + Module Federation – не работает с базовой конфигурацией ⇐ Javascript

[Гость]

Я использую последнюю версию Vite с React 18 и пытаюсь интегрировать архитектуру федерации модулей. После запуска приложения на стороне сервера я получил следующую ошибку:

Предупреждение: React.jsx: тип недействителен — ожидалась строка (для встроенных компонентов) или класс/функция (для составных компонентов), но получено: неопределенное. Вероятно, вы забыли экспортировать компонент из файла, в котором он определен, или перепутали импорт по умолчанию и именованный импорт.

Проверьте свой код на странице main.tsx:7.

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

Моя конфигурация — это простой пустой проект create vite. Единственным дополнением, конечно же, является @originjs/vite-plugin-federation.

vite.config.ts

экспортировать default defineConfig({ база: '/мое-приложение', строить: { цель: 'esnext', }, плагины: [ реагировать(), федерация({ имя: 'my_app', имя файла: 'remoteEntry.js', выставляет: { './Initializer': './src/Initializer', }, общий: ['реагировать', 'реагировать-дом'], }), ], }) main.tsx:

импортировать React из 'реагировать' импортировать ReactDOM из «реагировать-дом/клиент» импортировать './index.css' импортировать инициализатор из "./Initializer.tsx"; ReactDOM.createRoot(document.getElementById('root')!).render( , ) Initializer.tsx

импортировать React из «реагировать»; импортировать приложение из «./App.tsx»; функция Initializer(): React.ReactElement { возвращаться ( ) } экспортировать инициализатор по умолчанию; App.tsx — без изменений по сравнению с новым созданным проектом.

package.json
{ "name": "мое приложение", «частное»: правда, "версия": "1.0.18", "тип": "модуль", "скрипты": { "start": "vite --port=3000 --strictPort", "build": "tsc && vite build", "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", "preview": "предварительный просмотр --port=3000 --strictPort", "serve": "предварительный просмотр --port=3000 --strictPort", "сонар-сканер": "гидролокатор-сканер", "half-prod": "npm run build", "full-prod": "npm i && npm запустить полупродукт" }, "зависимости": { "@originjs/vite-plugin-federation": "^1.3.1", "реагировать": "^18.2.0", "react-dom": "^18.2.0" }, "devDependency": { "@swc/cli": "^0.1.62", "@swc/core": "^1.3.86", "@types/react": "^18.2.15", "@types/react-dom": "^18.2.7", "@typescript-eslint/eslint-plugin": "^6.0.0", "@typescript-eslint/parser": "^6.0.0", "@vitejs/plugin-react-swc": "^3.3.2", "eslint": "^8.45.0", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.3", "машинописный текст": "^5.0.2", "вите": "^4.4.5" } }