It seems too early to ESM-only packages

[smelukov]

After 0.12, the MF-libraries started using the ESM format. This forces every package and project that uses MF to migrate into ESM. Some of them can't do this for several reasons:

• They use packages that aren't type: "module". Some of these may be upgraded to newer versions (that published as ESM), but some just don't have an ESM.
• Moving into ESM has some costs, such as updating bundlers or their configuration (some of which is not easy, especially for large enterprise projects).
• Some of the core MF libraries are CJS (e.g., https://github.com/module-federation/core/blob/master/packages/TypeScript/package.json#L6).

So, it seems too early to start using ESM (or publish packages is ESM-only). For now, it blocks non-ESM projects from getting the latest MF updates, and this is sad.

I would like to propose moving back to CJS or publishing MF-libraries in ESM+CJS format.

[rr-jimmy-multani]

We've encountered the same issue since attempting to update to @module-federation/[email protected] and above. It would be great if we could still support CJS.

[rr-victor-nazareth]

Agreed. Additionally, this technically should not have been consider a minor update as well - it's very much a disruptive, breaking change.

[zmzlois]

After 0.12, the MF-libraries started using the ESM format. This forces every package and project that uses MF to migrate into ESM. Some of them can't do this for several reasons:

• They use packages that aren't type: "module". Some of these may be upgraded to newer versions (that published as ESM), but some just don't have an ESM.

• Moving into ESM has some costs, such as updating bundlers or their configuration (some of which is not easy, especially for large enterprise projects).

• Some of the core MF libraries are CJS (e.g., https://github.com/module-federation/core/blob/master/packages/TypeScript/package.json#L6).

So, it seems too early to start using ESM (or publish packages is ESM-only). For now, it blocks non-ESM projects from getting the latest MF updates, and this is sad.

I would like to propose moving back to CJS or publishing MF-libraries in ESM+CJS format.

what are the libraries you used in MF here that doesn't fit your need? Looking into a path for everyone here

@smelukov @rr-victor-nazareth @rr-jimmy-multani

[rr-jimmy-multani]

Hey @zmzlois! The library that we're using is an internal one, owned by another team. We noticed that by locking @module-federation/[email protected], things work just fine, but when we try to update past this point, it errors out with the following:

Failed to compile.

./node_modules/@module-federation/runtime-tools/dist/runtime.cjs.js
Module not found: ESM packages (@module-federation/runtime) need to be imported. Use 'import' to reference the package instead. https://nextjs.org/docs/messages/import-esm-externals

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/@rakuten-rewards/appshell/node_modules/@module-federation/enhanced/dist/src/runtime.js
./node_modules/@rakuten-rewards/appshell/src/contexts/MessagingSDKContext/MessagingSDKContext.tsx
./node_modules/@rakuten-rewards/appshell/src/contexts/MessagingSDKContext/index.tsx
./node_modules/@rakuten-rewards/appshell/src/contexts/index.ts
./node_modules/@rakuten-rewards/appshell/src/index.ts
./src/pages/_app.tsx


> Build failed because of webpack errors
   Creating an optimized production build  .%                                                                 

[ScriptedAlchemy]

These should not be externals they must be bundled

[2heal1]

We didn't move to ESM only. The packages are dual format(cjs+esm). Not sure which version package has the preoblem.

Can you provide the more info like which package which version?

[rr-jimmy-multani]

Hey @2heal1! When we take a look at the codebase for @module-federation/nextjs-mf, it doesn't seem to contain any CJS files. You're right about other packages that are dependencies of @module-federation/nextjs-mf though; it seems like they contain both ESM and CJS files.

[2heal1]

@rr-jimmy-multani hi , i check it again . Found the @module-federation/nextjs-mf only export cjs with type: commonjs.

But yes , it miss esm files. @ScriptedAlchemy What do you think about adding esm files?

[ScriptedAlchemy]

Okay, so what exactly is the problem?
Next mf has always been cjs only.

I did change how the plugin works to prefer esm. But next mf and federation plugin all inject these into their virtual entrypoint. To the bundler itself should not matter?

Is there some interop issue serving esm?
Are you using the runtime independently of the plugin and have resolve issues?

Do you have a repo that shows the problem?

[ScriptedAlchemy]

As far as I know, we still ship cjs and esm for all our builds, at least of the core runtime? All the next apps are cjs based as well. Most the webpack plugins are cjs.

Are you using the runtime without a build plugin? Or is this a problem encountered through the "/enhanced" plugin?

Anyone have a repo that demonstrates the problems?

[smelukov]

@ScriptedAlchemy i've just update module-federation packages from 0.11 to 0.17 and got errors like:

src/bundlerUtils.ts:3:15 - error TS2305: Module '"@module-federation/sdk"' has no exported member 'moduleFederationPlugin'.

3 import type { moduleFederationPlugin } from '@module-federation/sdk';

and so on...

But type moduleFederationPlugin is exported from @module-federation/sdk as export * as moduleFederationPlugin from './ModuleFederationPlugin';

If I set type: 'module' in package.json
and

"module": "ESNext",
"moduleResolution": "bundler"

in tsconfig.json

it fixes all the errors, but we are not ready to move the whole project into esm

Before 0.12, everything worked fine.

[smelukov]

@ScriptedAlchemy https://github.com/smelukov/mf-esm-cjs-repo
just run npm install and npm run build

[smelukov]

And if you remove type module from the package json it goes away?

yep, but then tsc produces esm modules instead of cjs

[ScriptedAlchemy]

No i mean from my packages

[smelukov]

Yes, there are no errors

[ScriptedAlchemy]

Ok ill see what I can do. If you tsignore it, it works right? This is purely a ts "issue"

[smelukov]

If you tsignore it, it works right? This is purely a ts "issue"

yep, but it's unsafe to use it without types

[smelukov]

@ScriptedAlchemy any updates here?

[ScriptedAlchemy]

none yet, can send a pr if you want it done faster, send a pr.

ideally i want to keep it as type module, was thinking a nested cjs directory which has its own package.json with just {type: commonjs}, worst case, back to stateless modules again.