Федерация модулей Vite: remoteEntry.js возвращает html вместо JS ⇐ Javascript

[Anonymous]

Я пытаюсь модуль федерации с помощью Vite-React. Я сделал все конфигурации в файле vite.config.js как на хосте, так и в удаленном. Но когда я получаю доступ к импортированным файлам удаленного дистанционного управления на хосте, он показывает пустой экран
Я пытаюсь настроить федерацию модулей с помощью VITE с использованием @Originjs/Vite-Plugin-Federation. У меня есть удаленное приложение, разоблачающее компоненты и хост -приложение, импортирующее их. Однако, когда я пытаюсь получить доступ к http: // localhost: 5173/arsets/remoteentry.js, он возвращает HTML -страницу вместо JavaScript.
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import federation from '@originjs/vite-plugin-federation';

export default defineConfig({
plugins: [
react(),
federation({
name: 'remote_app',
filename: 'remoteEntry.js',
exposes: {
'./Button': './src/button.jsx',
'./Header': './src/components/Header.jsx'
},
shared: ["react", "react-dom", "jotai"],
})
],
build: {
modulePreload: false,
target: 'esnext',
minify: false,
cssCodeSplit: false
},
});
< /code>
Это удаленная конфигурация. Попытка обмена кнопкой и заголовком < /p>
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';
import federation from '@originjs/vite-plugin-federation';

export default defineConfig({
plugins: [
react(),
federation({
name: 'host_app',
remotes: {
remote_app: 'http://localhost:5173/assets/remoteEntry.js'
},
shared: ["react", "react-dom"]
})
],
build: {
modulePreload: false,
target: 'esnext',
minify: false,
cssCodeSplit: false
}
});
< /code>
Это конфигурация хоста < /p>
Компоненты загрузки в приложении хоста < /p>
const RemoteButton = React.lazy(() => import('remote_app/Button'))
const Header = React.lazy(() => import('remote_app/Header'))
< /code>




< /code>
versions:
"@vitejs/plugin-react-swc": "^3.5.0",
"@originjs/vite-plugin-federation": "^1.3.9",
"react-router-dom": "^7.2.0",
When i navigated to /button route or /header route it is a blank screen.
For debugging i tried to import with promise function in useEffect of App.jsx
useEffect(() => {
import("remote_app/Button")
.then((module) => {
console.log("RemoteButton loaded:", module);
})
.catch((error) => {
console.error("Failed to load RemoteButton:", error);
});
}, []);
< /code>
Error i the browser console:
Uncaught TypeError: Failed to fetch dynamically imported module: http://localhost:5173/assets/remoteEntry.js
in the browser console following error is shown
Network tab response for http://localhost:5173/assets/remoteEntry.js:
Status: 200
Response Body: Instead of JS, it returns the default Vite HTML page



import { injectIntoGlobalHook } from "/@react-refresh";
injectIntoGlobalHook(window);
window.$RefreshReg$ = () => {};
window.$RefreshSig$ = () => (type) => type;






Vite + React







< /code>
What I Have Tried:
Checked the remoteEntry.js URL: It loads an HTML page instead of a JS module.
Manually importing in useEffect:
useEffect(() => {
import("remote_app/Button")
.then((module) => {
console.log("RemoteButton loaded:", module);
})
.catch((error) => {
console.error("Failed to load RemoteButton:", error);
});
}, []);

< /code>
Expected Outcome:
http://localhost:5173/assets/remoteEntry.js should return the federated module, not an HTML page.
Remote components should load successfully in the host app.
Why is remoteEntry.js not being generated properly, and how do I fix this?
Both host and remote vite+react applications.
I tried in many ways but i can't understand what is the mistake.

Подробнее здесь: https://stackoverflow.com/questions/794 ... tead-of-js