[nextjs] v8.2.4 caches remoteEntry.js leading to stale chunks. remoteEntry is missing the ?t={date.now()} timestamp.

[digitalhank]

Describe the bug

Our federation architecture stitches together several nextjs applications. after upgrading to the latest module federation version, from 6.7.1 -> 8.2.4, we've started experiencing intermittent issues on production. What i've seen is that remoteEntry gets cached, and when the host tries to fetch the remote's chunks it fails. This is due to the chunk ids being defined in remoteEntry.

Hard refreshing the browser tab (which clears cache of all static assets on that page) resolves the issue until the remote rolls out a new version.

Below are examples of the request url from host to tenant. the latest version is missing the timestamp.
8.2.4 - https://{domain}/_next/static/chunks/remoteEntry.js
7.0.8 - https://{domain}/_next/static/chunks/remoteEntry.js?1710943728634
6.7.1 - https://{domain}/_next/static/chunks/remoteEntry.js?t=1710943381827

Thanks for the help.

FYI
The reproduction is a clone of https://github.com/module-federation/module-federation-examples/tree/master/nextjs-v13. You can see the issue there, but the local dev environment seems to carry additional issues, i'm seeing hydration errors at least.

Reproduction

https://github.com/digitalhank/remoteEntry-broken-example

Used Package Manager

npm

System Info

System:
    OS: macOS 14.3.1
    CPU: (8) arm64 Apple M1
    Memory: 84.44 MB / 16.00 GB
    Shell: 5.9 - /opt/homebrew/bin/zsh
  Binaries:
    Node: 20.10.0 - ~/.nvm/versions/node/v20.10.0/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 9.3.1 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 122.0.6261.129
    Safari: 17.3.1

Validations

• Read the docs.
• Read the common issues list.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Module federation issue and not a framework-specific issue.
• The provided reproduction is a minimal reproducible example of the bug.

[zackarychapple]

Tagging in @ryok90 on this one because I believe he recently did some work around this. Also @digitalhank shameless plug, this is one of the things that Zephyr Cloud was built to solve in a scalable fashion for enterprises.

[digitalhank]

@zackarychapple thanks, that's a quick response if i've ever seen one! zephyr cloud looks incredible, but my company mostly runs on-prem.

[zackarychapple]

@zackarychapple thanks, that's a quick response if i've ever seen one! zephyr cloud looks incredible, but my company mostly runs on-prem.

fair enough :) will keep an eye out for @ryok90 or @RussellCanfield to hop in :)

[RussellCanfield]

I am not familiar with the NextPlugin as much, but @digitalhank you could try this as a work around for now :)

Register a new runtime plugin with Next

new NextFederationPlugin({
          name: 'shop',
          filename: 'static/chunks/remoteEntry.js',
          runtimePlugins: [require.resolve('./test.js')],
          remotes: {
            home: 'home@http://localhost:3001/_next/static/chunks/remoteEntry.js',
            checkout: 'checkout@http://localhost:3000/_next/static/chunks/remoteEntry.js',
          },
          exposes: {
            './shop': './pages/shop',
            './pdp': './pages/p/[...slug].js',
            './pages-map': './pages-map.js',
            './customHook': './components/someHook.js',
          },
        }),

Create plugin

const CacheBustPlugin = () => {
  return {
    name: 'cache-bust-plugin',
    beforeRequest: args => {
      const { options, id } = args;
      const remoteName = id.split('/').shift();
      const remote = options.remotes.find(remote => remote.name === remoteName);
      if (remote.entry.includes('?t=')) {
        return args;
      }

      remote.entry = `${remote.entry}?t=${Date.now()}`;
      return args;
    },
  };
};

export default CacheBustPlugin;

[digitalhank]

@RussellCanfield great! this fixed it locally, have not tried it on production yet.

[zackarychapple]

@RussellCanfield would you like to add this to the docs / examples?

[RussellCanfield]

@RussellCanfield would you like to add this to the docs / examples?

There is a semi-similar example here:
https://github.com/module-federation/module-federation-examples/blob/c07b515575971f77bbdac0eb6e1b6d793ff1d9ae/runtime-plugins/remote-router/host/config/runtimePlugin.js

Do you think it's worth adding?

[zackarychapple]

@RussellCanfield would you like to add this to the docs / examples?

There is a semi-similar example here: https://github.com/module-federation/module-federation-examples/blob/c07b515575971f77bbdac0eb6e1b6d793ff1d9ae/runtime-plugins/remote-router/host/config/runtimePlugin.js

Do you think it's worth adding?

The highest value will be adding it to the docs as a recipe for cache busting on the doc site

[ScriptedAlchemy]

I can amend the internal runtime plugin used in nextjs-mf to add a bust stamp

[ScriptedAlchemy]

#2232

[digitalhank]

much appreciated @ScriptedAlchemy