diff --git a/packages/react/src/generators/host/files/common-ts/src/app/__fileName__.tsx__tmpl__ b/packages/react/src/generators/host/files/common-ts/src/app/__fileName__.tsx__tmpl__ index ad86fa8d5f..80ebbf9aa8 100644 --- a/packages/react/src/generators/host/files/common-ts/src/app/__fileName__.tsx__tmpl__ +++ b/packages/react/src/generators/host/files/common-ts/src/app/__fileName__.tsx__tmpl__ @@ -12,7 +12,7 @@ import { loadRemote } from '@module-federation/enhanced/runtime'; <%_ if (dynamic) { _%> const <%= r.className %> = React.lazy(() => loadRemote('<%= r.fileName %>/Module') as any) <%_ } else { _%> -const <%= r.className %> = React.lazy(() => import('<%= r.fileName %>/Module')); +const <%= r.className %> = React.lazy(() => import('<%= r.packageName || r.fileName %>/Module')); <%_ } _%> <%_ }); _%> <%_ } _%> diff --git a/packages/react/src/generators/host/files/common/src/app/__fileName__.js__tmpl__ b/packages/react/src/generators/host/files/common/src/app/__fileName__.js__tmpl__ index 583bd3c13e..1fecf04edc 100644 --- a/packages/react/src/generators/host/files/common/src/app/__fileName__.js__tmpl__ +++ b/packages/react/src/generators/host/files/common/src/app/__fileName__.js__tmpl__ @@ -12,7 +12,7 @@ import { loadRemote } from '@module-federation/enhanced/runtime'; <%_ if (dynamic) { _%> const <%= r.className %> = React.lazy(() => loadRemote('<%= r.fileName %>/Module') as any) <%_ } else { _%> -const <%= r.className %> = React.lazy(() => import('<%= r.fileName %>/Module')); +const <%= r.className %> = React.lazy(() => import('<%= r.packageName || r.fileName %>/Module')); <%_ } _%> <%_ }); _%> <%_ } _%> diff --git a/packages/react/src/generators/host/files/rspack-common/src/app/__fileName__.jsx__tmpl__ b/packages/react/src/generators/host/files/rspack-common/src/app/__fileName__.jsx__tmpl__ index 470be4a5c5..96fc352658 100644 --- a/packages/react/src/generators/host/files/rspack-common/src/app/__fileName__.jsx__tmpl__ +++ b/packages/react/src/generators/host/files/rspack-common/src/app/__fileName__.jsx__tmpl__ @@ -13,7 +13,7 @@ import { loadRemote } from '@module-federation/enhanced/runtime'; <%_ if (dynamic) { _%> const <%= r.className %> = React.lazy(() => loadRemote('<%= r.fileName %>/Module') as any) <%_ } else { _%> -const <%= r.className %> = React.lazy(() => import('<%= r.fileName %>/Module')); +const <%= r.className %> = React.lazy(() => import('<%= r.packageName || r.fileName %>/Module')); <%_ } _%> <%_ }); _%> <%_ } _%> diff --git a/packages/react/src/generators/host/lib/add-module-federation-files.ts b/packages/react/src/generators/host/lib/add-module-federation-files.ts index 3e9cc38f78..df95ae2bb5 100644 --- a/packages/react/src/generators/host/lib/add-module-federation-files.ts +++ b/packages/react/src/generators/host/lib/add-module-federation-files.ts @@ -4,6 +4,7 @@ import { joinPathFragments, names, offsetFromRoot, + readJson, readProjectConfiguration, } from '@nx/devkit'; import { @@ -18,6 +19,41 @@ import { import { NormalizedSchema } from '../schema'; import { join } from 'path'; +function getRemoteData( + host: Tree, + name: string, + port: number +): { fileName: string; className: string; port: number; packageName?: string } { + const baseData = { + ...names(name), + port, + }; + + // In TS Solution setup, we need the actual package name for imports + if (isUsingTsSolutionSetup(host)) { + try { + const remoteConfig = readProjectConfiguration(host, name); + const remotePackageJsonPath = joinPathFragments( + remoteConfig.root, + 'package.json' + ); + if (host.exists(remotePackageJsonPath)) { + const remotePackageJson = readJson(host, remotePackageJsonPath); + if (remotePackageJson.name) { + return { + ...baseData, + packageName: remotePackageJson.name, + }; + } + } + } catch (e) { + // If we can't find the package name, fall back to fileName + } + } + + return baseData; +} + export function addModuleFederationFiles( host: Tree, options: NormalizedSchema, @@ -37,10 +73,7 @@ export function addModuleFederationFiles( }, static: !options?.dynamic, remotes: defaultRemoteManifest.map(({ name, port }) => { - return { - ...names(name), - port, - }; + return getRemoteData(host, name, port); }), } : { @@ -49,10 +82,7 @@ export function addModuleFederationFiles( static: !options?.dynamic, tmpl: '', remotes: defaultRemoteManifest.map(({ name, port }) => { - return { - ...names(name), - port, - }; + return getRemoteData(host, name, port); }), }; diff --git a/packages/react/src/generators/remote/lib/update-host-with-remote.ts b/packages/react/src/generators/remote/lib/update-host-with-remote.ts index 4760d3cdb1..988cda520a 100644 --- a/packages/react/src/generators/remote/lib/update-host-with-remote.ts +++ b/packages/react/src/generators/remote/lib/update-host-with-remote.ts @@ -79,11 +79,31 @@ export function updateHostWithRemote( true, tsModule.ScriptKind.TSX ); + + // Get package name if in TS Solution setup + const remoteNames = names(remoteName); + let packageName: string | undefined; + if (isUsingTsSolutionSetup(host)) { + try { + const remoteConfig = readProjectConfiguration(host, remoteName); + const remotePackageJsonPath = joinPathFragments( + remoteConfig.root, + 'package.json' + ); + if (host.exists(remotePackageJsonPath)) { + const remotePackageJson = readJson(host, remotePackageJsonPath); + packageName = remotePackageJson.name; + } + } catch (e) { + // Fall back to fileName if package name not found + } + } + host.write( appComponentPath, applyChangesToString( sourceCode, - addRemoteRoute(source, names(remoteName)) + addRemoteRoute(source, { ...remoteNames, packageName }) ) ); } else { diff --git a/packages/react/src/module-federation/ast-utils.ts b/packages/react/src/module-federation/ast-utils.ts index 221d7e70cb..62e2d7da9d 100644 --- a/packages/react/src/module-federation/ast-utils.ts +++ b/packages/react/src/module-federation/ast-utils.ts @@ -100,6 +100,7 @@ export function addRemoteRoute( names: { fileName: string; className: string; + packageName?: string; } ): StringChange[] { const routes = findElements(source, 'Route'); @@ -112,10 +113,12 @@ export function addRemoteRoute( const firstRoute = routes[0]; const firstLink = links[0]; + // Use packageName for imports in TS Solution setup, fallback to fileName + const importPath = names.packageName || names.fileName; changes.push( ...addImport( source, - `const ${names.className} = React.lazy(() => import('${names.fileName}/Module'));` + `const ${names.className} = React.lazy(() => import('${importPath}/Module'));` ) );