fix(module-federation): normalize kebab-cased names to snake_cased (#28237)

<!-- Please make sure you have read the submission guidelines before
posting an PR -->
<!--
https://github.com/nrwl/nx/blob/master/CONTRIBUTING.md#-submitting-a-pr
-->

<!-- Please make sure that your commit message follows our format -->
<!-- Example: `fix(nx): must begin with lowercase` -->

<!-- If this is a particularly complex change or feature addition, you
can request a dedicated Nx release for this pull request branch. Mention
someone from the Nx team or the `@nrwl/nx-pipelines-reviewers` and they
will confirm if the PR warrants its own release for testing purposes,
and generate it for you if appropriate. -->

## Current Behavior
<!-- This is the behavior we have today -->
Nx project names can be kebab-cased but module federation remotes that
use global or var will not support this.
They need to be snake cased


## Expected Behavior
<!-- This is the behavior we should expect with the changes in this PR
-->
snake_case the remote names

## Related Issue(s)
<!-- Please link the issue being fixed so it gets closed when this is
merged. -->

Fixes #
This commit is contained in:
Colum Ferry 2024-10-02 14:22:27 +01:00 committed by GitHub
parent 3c791c7133
commit 95d26c6bf4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 33 additions and 16 deletions

View File

@ -40,7 +40,7 @@ export async function withModuleFederationForSSR(
...(config.plugins ?? []),
new (require('@module-federation/enhanced').ModuleFederationPlugin)(
{
name: options.name,
name: options.name.replace(/-/g, '_'),
filename: 'remoteEntry.js',
exposes: options.exposes,
remotes: mappedRemotes,

View File

@ -42,7 +42,7 @@ export async function withModuleFederation(
plugins: [
...(config.plugins ?? []),
new ModuleFederationPlugin({
name: options.name,
name: options.name.replace(/-/g, '_'),
filename: 'remoteEntry.mjs',
exposes: options.exposes,
remotes: mappedRemotes,

View File

@ -28,7 +28,7 @@ export async function withModuleFederationForSSR(
config.plugins.push(
new (require('@module-federation/enhanced').ModuleFederationPlugin)(
{
name: options.name,
name: options.name.replace(/-/g, '_'),
filename: 'remoteEntry.js',
exposes: options.exposes,
remotes: mappedRemotes,

View File

@ -41,7 +41,7 @@ export async function withModuleFederation(
config.plugins.push(
new ModuleFederationPlugin({
name: options.name,
name: options.name.replace(/-/g, '_'),
filename: 'remoteEntry.js',
exposes: options.exposes,
remotes: mappedRemotes,

View File

@ -18,7 +18,8 @@ export function mapRemotes(
for (const remote of remotes) {
if (Array.isArray(remote)) {
mappedRemotes[remote[0]] = handleArrayRemote(remote, remoteEntryExt);
const remoteName = normalizeRemoteName(remote[0]);
mappedRemotes[remoteName] = handleArrayRemote(remote, remoteEntryExt);
} else if (typeof remote === 'string') {
mappedRemotes[remote] = handleStringRemote(remote, determineRemoteUrl);
}
@ -32,7 +33,8 @@ function handleArrayRemote(
remote: [string, string],
remoteEntryExt: 'js' | 'mjs'
): string {
const [remoteName, remoteLocation] = remote;
let [remoteName, remoteLocation] = remote;
remoteName = normalizeRemoteName(remoteName);
const remoteLocationExt = extname(remoteLocation);
// If remote location already has .js or .mjs extension
@ -82,7 +84,8 @@ export function mapRemotesForSSR(
for (const remote of remotes) {
if (Array.isArray(remote)) {
const [remoteName, remoteLocation] = remote;
let [remoteName, remoteLocation] = remote;
remoteName = normalizeRemoteName(remoteName);
const remoteLocationExt = extname(remoteLocation);
mappedRemotes[remoteName] = `${remoteName}@${
['.js', '.mjs'].includes(remoteLocationExt)
@ -94,9 +97,14 @@ export function mapRemotesForSSR(
}/remoteEntry.${remoteEntryExt}`
}`;
} else if (typeof remote === 'string') {
mappedRemotes[remote] = `${remote}@${determineRemoteUrl(remote)}`;
const remoteName = normalizeRemoteName(remote);
mappedRemotes[remoteName] = `${remoteName}@${determineRemoteUrl(remote)}`;
}
}
return mappedRemotes;
}
function normalizeRemoteName(remote: string): string {
return remote.replace(/-/g, '_');
}

View File

@ -31,7 +31,7 @@ export async function withModuleFederationForSSR(
// eslint-disable-next-line @typescript-eslint/no-var-requires
new (require('@module-federation/enhanced/rspack').ModuleFederationPlugin)(
{
name: options.name,
name: options.name.replace(/-/g, '_'),
filename: 'remoteEntry.js',
exposes: options.exposes,
remotes: mappedRemotes,

View File

@ -55,7 +55,7 @@ export async function withModuleFederation(
config.plugins.push(
new ModuleFederationPlugin({
name: options.name,
name: options.name.replace(/-/g, '_'),
filename: 'remoteEntry.js',
exposes: options.exposes,
remotes: mappedRemotes,

View File

@ -19,14 +19,16 @@ export function mapRemotes(
for (const remote of remotes) {
if (Array.isArray(remote)) {
mappedRemotes[remote[0]] = handleArrayRemote(
const remoteName = normalizeRemoteName(remote[0]);
mappedRemotes[remoteName] = handleArrayRemote(
remote,
remoteEntryExt,
isRemoteGlobal
);
} else if (typeof remote === 'string') {
mappedRemotes[remote] = handleStringRemote(
remote,
const remoteName = normalizeRemoteName(remote);
mappedRemotes[remoteName] = handleStringRemote(
remoteName,
determineRemoteUrl,
isRemoteGlobal
);
@ -42,7 +44,8 @@ function handleArrayRemote(
remoteEntryExt: 'js' | 'mjs',
isRemoteGlobal: boolean
): string {
const [remoteName, remoteLocation] = remote;
let [remoteName, remoteLocation] = remote;
remoteName = normalizeRemoteName(remoteName);
const remoteLocationExt = extname(remoteLocation);
// If remote location already has .js or .mjs extension
@ -95,7 +98,8 @@ export function mapRemotesForSSR(
for (const remote of remotes) {
if (Array.isArray(remote)) {
const [remoteName, remoteLocation] = remote;
let [remoteName, remoteLocation] = remote;
remoteName = normalizeRemoteName(remoteName);
const remoteLocationExt = extname(remoteLocation);
mappedRemotes[remoteName] = `${remoteName}@${
['.js', '.mjs'].includes(remoteLocationExt)
@ -107,9 +111,14 @@ export function mapRemotesForSSR(
}/remoteEntry.${remoteEntryExt}`
}`;
} else if (typeof remote === 'string') {
mappedRemotes[remote] = `${remote}@${determineRemoteUrl(remote)}`;
const remoteName = normalizeRemoteName(remote);
mappedRemotes[remoteName] = `${remoteName}@${determineRemoteUrl(remote)}`;
}
}
return mappedRemotes;
}
function normalizeRemoteName(remote: string) {
return remote.replace(/-/g, '_');
}