Nextjs-mf and NextJS 14.2.14+ issue

[ciandt-crodrigues]

Describe the bug

After the recent NextJS update, the nextjs-mf package starts falling with.

The target environment doesn't support dynamic import() syntax so it's not possible to use external type 'module' within a script

Import trace for requested module:
external "@headlessui/react"

This issue is fixed by either not applying the NextFederationPlugin (which defeats the purpose) or fixing the Nextjs version to 12.2.13 or less.

Something they did broke the plugin, maybe you could share some workaround?

attached is a somewhat small reproducible environment.

Reproduction

https://codesandbox.io/p/devbox/errordynamicimport-l6mzwq

Used Package Manager

npm

System Info

from CodeSandbox:

  System:
    OS: Linux 6.1 Debian GNU/Linux 12 (bookworm) 12 (bookworm)
    CPU: (2) x64 AMD EPYC
    Memory: 1.09 GB / 4.01 GB
    Container: Yes
    Shell: Unknown
  Binaries:
    Node: 20.11.1 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.4 - /usr/local/bin/npm
    pnpm: 8.15.4 - /usr/local/share/npm-global/bin/pnpm

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.

[ciandt-crodrigues]

The issue thrown is related to headlessui, and I know this is supposed to be a client-only package, but my code worked before and only stopped working on new versions of NextJS. It would be nice to have the code updated to work, but I understand you probably can't support all frameworks out there having at least a workaround would help me a ton.
This code works without using Module Federation. with app routing I think that the "use client" on the lib would work, but unfortunately, app router is a long way (if we make it at all)

[ScriptedAlchemy]

nextjs-mf will not work with app router.
try it with pages router only and see if it works then

[ScriptedAlchemy]

The problem is your build configuration. Clearly, vercel has shipped breaking changes yet again.

do this

   environment: {
        ...config.output.environment,
        asyncFunction: true,
        dynamicImport: true
      },

[rdenman]

@ScriptedAlchemy I'm having the same issue - adding asyncFunction & dynamicImport fixes my build, but I'm now getting errors at runtime: ReferenceError: __webpack_share_scopes__ is not defined

Here's my webpack config, am I missing something here?

webpack(config, { isServer }) {
    config.output.environment = {
      ...config.output.environment,
      asyncFunction: true,
      dynamicImport: true,
    };
    config.plugins.push(
      new NextFederationPlugin({
        name: "my_app",
        filename: "static/chunks/remoteEntry.js",
        remotes: { some_mfe: 'some_mfe@/some-mfe/remoteEntry.js` },
        shared: {
          "@my/my-ui-lib": { singleton: true,  requiredVersion: false },
          "@emotion/react": { singleton: true,  requiredVersion: false },
          "@emotion/styled": { singleton: true,  requiredVersion: false },
          "@mui/material": { singleton: true,  requiredVersion: false },
          "@tanstack/react-query": { singleton: true,  requiredVersion: false },
          i18next: { singleton: true,  requiredVersion: false },
          "next-i18next": { singleton: true,  requiredVersion: false },
          "react-i18next": { singleton: true,  requiredVersion: false }
        },
        extraOptions: {
          exposePages: true,
          debug: process.env.NODE_ENV === "development",
        },
      }),
    );

    return config;
  },

Happy to put together a repro repo if needed too.

This is for [email protected], @module-federation/[email protected]. [email protected] works just fine

[ScriptedAlchemy]

Provide repo

[rdenman]

Sorry, I've been out for a bit and haven't had a chance to get a repo setup. Some later version of the nextjs-mf plugin seems to have resolved this, I can upgrade to latest next 14 and all's well.

[ScriptedAlchemy]

Warning Support for next is ending

#3153

[ciandt-crodrigues]

. Some later version of the nextjs-mf plugin seems to have resolved this, I can upgrade to latest next 14 and all's well.

@rdenman do you mind sharing the version of next-mf and next that are working for you?

[rdenman]

@ciandt-crodrigues with this package being EOL'd, I've since ripped it out of my app in favor of Next Zones (for now). It was whatever latest was, probably in the 8.6-8.7ish range

[ScriptedAlchemy]

Vercel is now actively exploring MF v2 as a first class supported tech. Fingers crossed