react app fails on launch with error in newly created 20.2.0 workspace with preset=apps

[bigfish]

Current Behavior

Run the following commands:

npx create-nx-workspace react-apps --preset=apps --pm=pnpm --bundler=rspack

cd react-apps

pnpm nx add @nx/react

pnpm nx g @nx/react:app --name=my-app --directory=apps/myapp

stylsheet format: css
React Router: y
bundler: rspack
linter: eslint
unit test runner: jest
e2e: none

pnpm nx serve my-app

• app is served (no errors) but screen is blank

following error in console:

Uncaught ReferenceError: $RefreshReg$ is not defined
at ./src/app/nx-welcome.tsx (nx-welcome.tsx:848:26)
at webpack_require (main.tsx:13:11)
at fn (main.tsx:13:11)
at ./src/app/app.tsx (stripAnsi.js:18:25)
at webpack_require (main.tsx:13:11)
at fn (main.tsx:13:11)
at ./src/main.tsx (nx-welcome.tsx:848:26)
at webpack_require (main.tsx:13:11)
at main.tsx:13:11
at main.tsx:13:11

Expected Behavior

app renders nx-welcome component.

GitHub Repo

No response

Steps to Reproduce

npx create-nx-workspace react-apps --preset=apps --pm=pnpm --bundler=rspack

cd react-apps

pnpm nx add @nx/react

pnpm nx g @nx/react:app --name=my-app --directory=apps/myapp

stylsheet format: css
React Router: y
bundler: rspack
linter: eslint
unit test runner: jest
e2e: none

pnpm nx serve my-app

Nx Report

NX   Report complete - copy this into the issue template

Node           : 22.11.0
OS             : darwin-x64
Native Target  : x86_64-macos
pnpm           : 8.10.2

nx                 : 20.2.0
@nx/js             : 20.2.0
@nx/jest           : 20.2.0
@nx/eslint         : 20.2.0
@nx/workspace      : 20.2.0
@nx/devkit         : 20.2.0
@nx/eslint-plugin  : 20.2.0
@nx/react          : 20.2.0
@nx/rspack         : 20.2.0
@nx/web            : 20.2.0
typescript         : 5.6.3
---------------------------------------
Registered Plugins:
@nx/eslint/plugin
@nx/jest/plugin

Failure Logs

Package Manager Version

No response

Operating System

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

Additional Information

No response

[bigfish]

This can be reproduced more simply with react-monorepo:

npx create-nx-workspace react-monorepo --preset=react-monorepo --pm=pnpm --appName=my-app --bundler=rspack

pnpm nx serve my-ap

"no errors found" in console, but blank screen and error above

[bigfish]

so I have found a workaround, which is to insert the react-refresh-plugin directly in my app's rspack.config. So it now looks like this:

const ReactRefreshPlugin = require('@rspack/plugin-react-refresh');
const isDev = process.env.NODE_ENV === 'development';

const { composePlugins, withNx, withWeb } = require('@nx/rspack');
module.exports = composePlugins(withNx(), withWeb(), (config) => {
  return {
    ...config,
    plugins: [...config.plugins, isDev ? new ReactRefreshPlugin() : undefined],
  };
});

[pawel-twardziak]

@bigfish hi, change your rspack.config.js to this:

const { composePlugins, withNx, withReact } = require('@nx/rspack');
module.exports = composePlugins(withNx(), withReact(), (config) => {
  return config;
});

withReact should be there instead of withWeb out of the box. I will fix it.

[kh-aco]

@bigfish hi, change your rspack.config.js to this:

const { composePlugins, withNx, withReact } = require('@nx/rspack');
module.exports = composePlugins(withNx(), withReact(), (config) => {
return config;
});
withReact should be there instead of withWeb out of the box. I will fix it.

Thx for the fix

[bigfish]

aha, thanks @pawel-twardziak !