Vite Modul Federation: RemoteEntry.js gibt HTML anstelle von JS zurück ⇐ JavaScript

[Guest]

Ich versuche, die Föderation mit Vite-React zu modulieren. Ich habe alle Konfigurationen in der Datei vite.config.js sowohl in Host als auch in Remote durchgeführt. Wenn ich jedoch auf die importierten Remote-Dateien im Host zugriff, wird der leere Bildschirm
angezeigt, versuche ich, die Modulveration mit vite mit @OriginJS/vite-Plugin-Föderation einzurichten. Ich habe eine Remote -App, die Komponenten enthüllt und eine Host -App importiert. Wenn ich jedoch versuche, auf http: // localhost: 5173/assets/remoteEntry.js zugreifen zu können, gibt es eine HTML -Seite anstelle von JavaScript zurück.
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>
Dies ist eine Remote -Konfiguration. Versuchenimport { 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>
Dies ist Host -Konfiguration < /p>
Ladenkomponenten in Host -App < /p>
ladenconst 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.