NextJS example: dev build works, "yarn serve" does not

[arielweinberger]

Hey,

I am struggling to get the production build of a federated NextJS application to work. It works fine in development mode, but it does not work well when trying to serve a production build via next start.

If you take the NextJS example in this repo, simply installing both next1 and next2 applications and running yarn build && yarn serve at the root of the repo does not work.

The console looks fine:

yarn run v1.22.5
$ concurrently "cd next1; yarn start" "cd next2; yarn start"
$ next start
$ next start -p 3001
[1] ready - started server on http://localhost:3001
[0] ready - started server on http://localhost:3000

But then when navigating to the application that consumes a remote package (3001), I get the following in the console:

main-6dde50cbe77fd05ff2ef.js:1 Error: Container missing
while loading "./exposedTitle" from 5897
    at f (webpack-b1c8ee9f5317a256befc.js:1)
    at webpack-b1c8ee9f5317a256befc.js:1
    at c (webpack-b1c8ee9f5317a256befc.js:1)
    at webpack-b1c8ee9f5317a256befc.js:1
    at Array.forEach (<anonymous>)
    at Object.e.f.remotes (webpack-b1c8ee9f5317a256befc.js:1)
    at webpack-b1c8ee9f5317a256befc.js:1
    at Array.reduce (<anonymous>)
    at Function.e.e (webpack-b1c8ee9f5317a256befc.js:1)
    at index-60f10addd364aee2f2a1.js:1

Is it just me or are others facing the same issue?

[rmunch]

Hi @arielweinberger - I ran into the same issue, and was able to fix it by removing the async attribute from the script tags. It seems like it'd be ideal to use an async script for this for performance reasons, but I haven't quite figured out if that's a limitation of NextJS right now (see https://twitter.com/ScriptedAlchemy/status/1348409930076733442 and https://twitter.com/ScriptedAlchemy/status/1348750479136870402).

Would love to hear how you progress from there.

Also, the latest version of nextjs-mf (0.1.0) appears not to work - I get an error like BREAKING CHANGE: No more changes should happen to Compilation.assets after sealing the Compilation.. The previous version did work (0.0.2). I've also been trying to configure shared dependencies for my own federated modules, but have been running into issues there as well (happy to share details if you like).

[arielweinberger]

@rmunch Maybe good for us to get in touch to share knowledge anyway. I am struggling to understand the readiness of MF as I want to incorporate it into our business in a new greenfield project.

[arielweinberger]

@rmunch Removing the async part in the script tags unfortunately doesn't fix my issue 😞

[gl0gl0]

This is happening to me as well. If I run next dev it works but not with next start.

[ScriptedAlchemy]

if you add this to your script data-webpack="REMOTENAME" webpack will work with async remotes

[ScriptedAlchemy]

Fixed in new plugin