Buiding app with @originjs/vite-plugin-federation
I have a Nuxt 3 micro app that I am trying to build using the nuxt config below. When I add the shared inside vite and do 'npm run build', I get the error:
ERROR Nuxt Build Error: [vite]: Rollup failed to resolve import "federation_fn_satisfy" from "virtual:federation_fn_import".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
build.rollupOptions.external
my nuxt config js:
import federation from '@originjs/vite-plugin-federation';
export default defineNuxtConfig({
app: {
baseURL: '/',
},
build: {
publicPath: '/',
},
runtimeConfig: {
public: {
API_URL: process.env.API_URL
}
},
ssr: false,
vite: {
plugins: [
federation({
name: 'test',
filename: 'remoteEntry.js',
exposes: {
'./App': './pages/user-management/index.vue',
'./Router': './router/index.js',
'./Sidebar': './components/Sidebar.vue',
},
shared: {
vue: {
singleton: true,
requiredVersion: '^3.2.0', // Ensure shared Vue compatibility
},
},
remotes: {
main:
${process.env.APP_BASE_URL}/remoteEntry.js,
},
styles: {
injectTo: 'head',
},
publicPath: '/',
}),
],
build: {
target: 'esnext',
},
server: {
fs: {
allow: ['..'],
},
},
},
nitro: {
preset: 'static',
},
});2 Replies
Hi @eleni. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Based on the information provided in the knowledge sources, I don't have specific details about using
@originjs/vite-plugin-federation with Nuxt 3. However, I can provide some insights related to Vite plugins and Nuxt configuration that might be helpful.
The error you're encountering suggests that there's an issue with how the federation plugin is resolving imports. This could be related to how Nuxt and Vite are interacting with the plugin.
Here are a few suggestions based on the available information:
1. Vite Configuration: Nuxt allows you to configure Vite plugins in the nuxt.config.ts file. You're already doing this correctly by adding the federation plugin to the vite.plugins array. Nuxt Vite Plugin Documentation
2. External Dependencies: The error message suggests that you might need to explicitly externalize some modules. You could try adding the problematic module to the build.rollupOptions.external configuration. However, be cautious as this might affect how your application functions.
3. Compatibility: Ensure that the version of @originjs/vite-plugin-federation you're using is compatible with Nuxt 3 and the version of Vite that Nuxt is using.
4. Nuxt Configuration: Your Nuxt configuration looks generally correct, but you might want to double-check that all the options you're using are compatible with Nuxt 3. For example, the build.publicPath option might not be necessary or might work differently in Nuxt 3. Nuxt Configuration Documentation
5. SSR Considerations: You've set ssr: false in your configuration, which is important when using client-side federation. This is correct if you intend to disable server-side rendering.
Unfortunately, the knowledge sources don't provide specific information about resolving this particular error with the federation plugin. You might need to consult the documentation for @originjs/vite-plugin-federation or reach out to their support channels for more specific guidance on this error.
If the issue persists, you might want to try creating a minimal reproduction of the problem and seeking help from the Nuxt or Vite communities, as this seems to be a specific interaction between Nuxt, Vite, and the federation plugin that isn't covered in the general Nuxt documentation.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@720950319500230707> Kapa.ai is still learning and improving, please let me know how I did by reacting below.