Skip to content

Nx + React + Rspack + Module Federation doesn't build fresh #31448

Closed
@LKay

Description

@LKay

Current Behavior

Project was generated freshly without any modifications of generated files.

After running that the generated rspack.config.ts looks like:

import { NxAppRspackPlugin } from '@nx/rspack/app-plugin';
import { NxReactRspackPlugin } from '@nx/rspack/react-plugin';
import { NxModuleFederationPlugin, NxModuleFederationDevServerPlugin } from '@nx/module-federation/rspack';
import { join } from 'path';

import config from './module-federation.config';

export default {
  output: {
    path: join(__dirname, 'dist'),
    publicPath: 'auto'
  },
  devServer: {
    port: 4200,
    historyApiFallback: {
      index: '/index.html',
      disableDotRule: true,
      htmlAcceptHeaders: ['text/html', 'application/xhtml+xml'],
    },
  },
  plugins: [
    new NxAppRspackPlugin({
      tsConfig: './tsconfig.app.json',
      main: './src/main.ts',
      index: './src/index.html',
      baseHref: '/',
      assets: ["./src/favicon.ico","./src/assets"],
      styles: [],
      outputHashing: process.env['NODE_ENV'] === 'production' ? 'all' : 'none',
      optimization: process.env['NODE_ENV'] === 'production',
    }),
    new NxReactRspackPlugin({
      // Uncomment this line if you don't want to use SVGR
      // See: https://react-svgr.com/
      // svgr: false
    }),
    new NxModuleFederationPlugin({ config }, { dts: false }),
    new NxModuleFederationDevServerPlugin({ config }),
  ],
};

When trying to run that freshly generated app with yarn nx serve host there are bunch of errors with resolver not being able to resolve @nx/rspack/app-plugin. The error suggest the resolver is misconfigured as it tries to resolve node_modules/@nx/rspack/app-plugin file without extension .js. Adding extensions to @nx/rspack/app-plugin.js import solves this particular error but similar ones show up with all other imports, including module-federation.config which is already a .ts file in the same folder.

Expected Behavior

The freshly bootstrapped app should build or serve without any issues.

GitHub Repo

No response

Steps to Reproduce

npx create-nx-workspace --packageManager=yarn

Then added @nx/react plugin with:

yarn nx add @nx/react

Next, the fresh React host app generated with:

yarn nx g @nx/react:host apps/host --bundler=rspack 

Nx Report

Node           : 24.0.2
OS             : darwin-arm64
Native Target  : aarch64-macos
yarn           : 4.9.2

nx                     : 21.1.2
@nx/js                 : 21.1.2
@nx/jest               : 21.1.2
@nx/eslint             : 21.1.2
@nx/workspace          : 21.1.2
@nx/devkit             : 21.1.2
@nx/eslint-plugin      : 21.1.2
@nx/module-federation  : 21.1.2
@nx/react              : 21.1.2
@nx/rspack             : 21.1.2
@nx/web                : 21.1.2
typescript             : 5.7.3
---------------------------------------
Registered Plugins:
@nx/js/typescript
@nx/react/router-plugin
@nx/rspack/plugin
@nx/eslint/plugin
@nx/jest/plugin
---------------------------------------
Cache Usage: 33.79 KB / 46.04 GB

Failure Logs

$ yarn nx serve host                                                                                                                                                                                                                   <region:us-west-2>

> nx run host:typecheck

> tsc --build --emitDeclarationOnly


> nx run host:serve

> rspack serve --port=4200 --node-env=development

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/Users/user/Projects/org/my-proj/node_modules/@nx/rspack/app-plugin' imported from /Users/user/Projects/org/my-proj/apps/host/rspack.config.ts
Did you mean to import "@nx/rspack/app-plugin.js"?
    at finalizeResolution (node:internal/modules/esm/resolve:274:11)
    at moduleResolve (node:internal/modules/esm/resolve:859:10)
    at defaultResolve (node:internal/modules/esm/resolve:983:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:799:12)
    at #cachedDefaultResolve (node:internal/modules/esm/loader:723:25)
    at #resolveAndMaybeBlockOnLoaderThread (node:internal/modules/esm/loader:758:38)
    at ModuleLoader.resolveSync (node:internal/modules/esm/loader:781:52)
    at #cachedResolveSync (node:internal/modules/esm/loader:742:25)
    at ModuleLoader.getModuleJobForRequire (node:internal/modules/esm/loader:460:50)
    at #link (node:internal/modules/esm/module_job:394:34) {
  code: 'ERR_MODULE_NOT_FOUND',
  url: 'file:///Users/user/Projects/org/my-proj/node_modules/@nx/rspack/app-plugin'
}

Package Manager Version

yarn@4.9.2

Operating System

  • macOS
  • Linux
  • Windows
  • Other (Please specify)

Additional Information

No response

Metadata

Metadata

Assignees

Labels

priority: highHigh Priority (important issues which affect many people severely)scope: bundlersIssues related to webpack, rolluptype: bug

Type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions