Usage of vite-federation-plugin with Nuxt 3 in SSR mode

[hlassiege]

Versions

• vite-plugin-federation: v1.1.9
• vite: v3.0.9

Reproduction

https://github.com/hlassiege/nuxt-vite-federation-plugin

Steps to reproduce

First of all, thanks a lot for this plugin. I'd like to use it with Nuxt 3 and Vite is the default builder.

To reproduce :

• Checkout the repository https://github.com/hlassiege/nuxt-vite-federation-plugin
• The remote component is exposed in the navbar folder. Use npm to install, build and serve the files
• remoteEntry.js is exposed on http://localhost:5001/assets/remoteEntry.js
• in app-front folder, use npm install and then npm run dev

What is Expected?

The application should launch successfully and display the remote component.

It's important to note that it's possible to make this example work if :

• shared: ['vue'] is removed, hence we don't optimize bundle size
• we disable SSR but it defeat the goal of nuxt

What is actually happening?

When the application start, there is cryptic error :

 ERROR  Cannot read properties of undefined (reading '_optimizeDepsMetadata')          

Then when attempting to go to http://localhost:3000 we have the following error in the log

[nitro] [dev] [unhandledRejection] TypeError: Cannot read properties of undefined (reading 'stubModule')
at __instantiateModule__ (file:///C:/Dev/src/divers/micro-frontend/app-front/.nuxt/dist/server/server.mjs:3932:11)
at __ssrLoadModule__ (file:///C:/Dev/src/divers/micro-frontend/app-front/.nuxt/dist/server/server.mjs:3923:25)
at ssrImport (file:///C:/Dev/src/divers/micro-frontend/app-front/.nuxt/dist/server/server.mjs:3948:13)
at ssrDynamicImport (file:///C:/Dev/src/divers/micro-frontend/app-front/.nuxt/dist/server/server.mjs:3959:12)
at file:///C:/Dev/src/divers/micro-frontend/app-front/.nuxt/dist/server/server.mjs:2984:11

I don't know if it's only a configuration issue or something more important.

[flyfishzy]

Several issues were found through the reproduction project.

1. Nuxt configures vue as external, if we configure shared: ['vue'], it will conflict with nuxt's configuration. So we should remove shared: ['vue'] .
2. Cannot read properties of undefined (reading '_optimizeDepsMetadata') is a bug, I will try to fix it later.
3. Component navbar needs to be configured as client side rendering only.

    <client-only>
      <navbar/>
    </client-only>

4. Subproject navbar cannot be configured as format: 'system', use default esm format.

Here is the final result:

[hlassiege]

ok, thanks a lot for your comment I'd like to understand the implication of "shared: ['vue']" When I remove it, does it mean that we have vue bundle twice on client side ? or even more if we have more component in the same page ?

[flyfishzy]

Theoretically you are right, there may be duplicate vue on both the host and the remote if shared is not configured . As for compatibility with nuxt, I think we'll have to look into it further.

[hlassiege]

Thanks a lot for your help :)

[flyfishzy]

https://github.com/nuxt/nuxt.js/issues/13632

[fro-dev-clau]

Any news?

[fro-profesional]

Any news?

[RaphaelDDL]

3. Component navbar needs to be configured as client side rendering only.

    <client-only>
      <navbar/>
    </client-only>

Doesn't this suggestion entirely defeats the purpose that this issue brings, which is MF in SSR? client-only makes slot only rendered in browser, so there's no SSR to benefit from.

[JupaCCLH]

Any news? /when will it work with ssr?

[sebastianestradaintcomex]

Hello, I don't know how to make it work with react and SSR using this template:

https://github.com/bluwy/create-vite-extra/tree/master/template-ssr-react-ts

Unfortunately vite-plugin-federation only works on the client side and I don't know how to at least make the server side ignore it. Does anyone know how to use it in a project with ssr?

[ashish141199]

+1