originjs
Plz check after build, remoteEntry Path
Versions
- vite-plugin-federation: 1.3.6
- vite: 5.1.3
Reproduction
this is my code.
import { fileURLToPath, URL } from "node:url";
import path from "path";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import federation from "@originjs/vite-plugin-federation";
import topLevelAwait from "vite-plugin-top-level-await";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
federation({
name: "onebite",
filename: "remoteEntry.js",
exposes: {
"./todayOneSentence/index": "./src/components/todayOneSentence/index.vue",
},
shared: ["vue"],
}),
topLevelAwait({
// The export name of top-level await promise for each chunk module
promiseExportName: "__tla",
// The function to generate import names of top-level await promise in each chunk module
promiseImportName: (i) => `__tla_${i}`,
}),
],
resolve: {
alias: {
"@": path.join(__dirname, "src/"),
//'@': fileURLToPath(new URL('src', import.meta.url)),
},
},
build: {
modulePreload: false,
target: "esnext",
minify: false,
cssCodeSplit: false,
assetsInlineLimit: 1024000, //1M
},
});
when i build, remoteEntry file path not correct.
return __federation_import('./assets/__federation_expose_TodayOneSentenceIndex-B5BIPCbQ.js').then((module)=>Object.keys(module).every((item)=>exportSet.has(item)) ? ()=>module.default : ()=>module);
},
The correct route is ./__federation_expose... , but it is ./assets/__federation_expose. That's why our service doesn't work normally.
plz check this bug.
Steps to reproduce
- npm i
- npm run build
- show remoteEntry file.
What is Expected?
bug.
What is actually happening?
That's why our service doesn't work normally.
exactly the same is happening with our microfrontends,
getting wrong path:
The correct route is ./__federation_expose... , but it is ./assets/__federation_expose.
Same. This happen to us also... we are currently stuck in this face the dynamic moduleMap now return __federation_import("./assets/__federation_expose_Component
before it was return __federation_import("./__federation_expose_Component
vite version : 6.0.7 vite-plugin-federation: 1.3.6
@masud-orangetoolz @JayeshBaviskar07
It will be solved by changing the version first. However, if this problem happens again, I think I'll get a headache.
Same problem here.
vite : 5.4.10 vite-plugin-federation : 1.3.7
So I downgrade version to 1.3.6 and it works properly
This commit https://github.com/originjs/vite-plugin-federation/commit/352f20e0d4b6f10ef8a86e173221b030bbd18f99 (1.3.7 release) has broken most applications based on this.
It doesn't seem to do what it says - in fact it now ignores the assetsDir completely...
We have the same issue in 1.3.7 as well. We reverted to 1.3.6 until it's fixed.
I can't access this commit, but by looking at the name I suspect it might be the cause for this:
The remoteEntryChunk should use the base path from the Vite config. (352f20e)
Today i Updated and running on the exact same issue. Problem appears for me by update from 1.2.2 to 1.3.7
Ran into the same issue updating to version >1.3.6, it looks like '/assets' is added to the path. Is there any workaround besides sticking to 1.3.5?
Ran into the same issue updating to version >1.3.6, it looks like '/assets' is added to the path. Is there any workaround besides sticking to 1.3.5?
use 1.3.8 !
This actually got me through the assets path problem
const jsPlugin = () => {
return {
name: 'js-transform',
transform(src, id) {
// Handle .js files in the dist/assets folder
if (id.endsWith('.js')) {
if (id.endsWith('remoteEntry.js')) {
return {
code: src.replace(/\/VitePortalSettings\/assets\/__federation_expose/g, '/VitePortalSettings/dist/assets/__federation_expose'),
map: null, // If you are using source maps, you can generate them here.
};
} else {
return {
code: src.replace(/\/VitePortalSettings\/assets\//g, '/VitePortalSettings/dist/assets/'),
map: null, // If you are using source maps, you can generate them here.
};
}
}
return null; // Leave other files untouched
}
};
};
just keep in mind that my host is pointing at the VitePortalSettings as the entry name for the remote, so basically you need the remotes object on the host with an entry like remotePortalSettings mapped to the path you want to use/replace in the remote config. Like host, remotePortalSettings: http://localhost:3001/VitePortalSettings/dist/assets/remoteEntry.js, and remote with this
plugins: [
react(),
federation({
exposes: {
'./PortalSettings': './src/App_Export',
},
filename: 'remoteEntry.js',
name: 'remotePortalSettings',
shared: [
{
react: {
requiredVersion: '18.2.0',
}
},
{
'react-dom': {
requiredVersion: '18.2.0',
}
}
],
}),
jsPlugin()
],
I added the requiredVersion for good luck only. This wasn't enough for me because after this I found out React is being loaded on the child as a second instance. It is there minified, but it seems to be null when anything from it is accessed.
