post process shared dependencies to avoid issues with cjs packages

[slawekkolodziej]

After inspecting the code, I discovered that the problem you encountered here is entirely different from what I had imagined. In this pull request I pass shared dependencies through yet another esbuild cycle. Ideally this should be done only for CJS modules

However, there I can see two issues:

1. await federationBuilder.build(); appears to have some bugs. It continues some work after the returned promise is resolved (that's why I have this weirs await sleep(1000).
2. Outputting node modules is done twice. Maybe the adapter could take care of that too?

[vercel[bot]]

@slawekkolodziej is attempting to deploy a commit to the Module Federation Team on Vercel.

A member of the Team first needs to authorize it.

[CLAassistant]

All committers have signed the CLA.

[slawekkolodziej]

I looked at https://github.com/angular-architects/module-federation-plugin to see what changes are needed in order to get this working.

1. This is clearly a bug, it's super easy to fix: https://github.com/angular-architects/module-federation-plugin/pull/224/files
2. We wouldn't need any additional steps if we could set this value to true https://github.com/angular-architects/module-federation-plugin/blob/main/libs/native-federation-core/src/lib/core/bundle-shared.ts#L48 esbuild would convert all modules to ESM for us.

[manfredsteyer]

awesome. Thank you. I'm going to look into it asap.

Can you pls elaborate a bit how you make esbuild to convert cjs to esm?

[slawekkolodziej]

It wasn't anything special, I run esbuild with the following options:

entryPoints: ['react'],
bundle: true,
format: 'esm',
outdir: 'out',

However, I noticed that it only takes care of the default export. The app breaks when I try to use any named import.

[slawekkolodziej]

I looked at esm.sh source code and I gave a shot to their esm-node-services package. It seems to be adding named exports properly now. However, react demo breaks, I'm looking into that now.

[slawekkolodziej]

I updated the code, it supports CJS now. React is properly shared between host and remote. Both apps are using hooks too.

Main logic can be found in native-federation-react/build/build-cjs.ts. I don't quite like the requireSnippet though.