NX + NestJS + webpack -> rspack = 🤷‍♂️

[rujorgensen]

Current Behavior

Neither of the generators @nx/rspack:convert-config-to-rspack-plugin or @nx/rspack:convert-webpack converts the webpack configuration of a NestJS application to rspack.

Expected Behavior

I'd expect:

1. A rspack.config.js configuration file to be generated inspired from the current webpack.config.js
2. The build target of the converted application project to be updated to use the new rspack configuration
3. The original webpack.config.js-file to be deleted

GitHub Repo

https://github.com/rujorgensen/nx-webpack-rspack-conf-issue

Steps to Reproduce

1. Create a fresh workspace: npx create-nx-workspace nx-workspace --preset=nest --no-interactive
2. Add @nx/rspack to the workspace: cd nx-workspace && nx add @nx/rspack
3. Convert the webpack configuration to rspack:
   a. npx nx g @nx/rspack:convert-webpack --project=nx-workspace
   --OR--
   b. npx nx g @nx/rspack:convert-config-to-rspack-plugin --project=nx-workspace

Current result:
3.a. Completes without touching any files
3.b. Fails with "NX Could not find any projects to migrate."

Nx Report

Node           : 20.11.1
OS             : linux-x64
Native Target  : x86_64-linux
npm            : 10.2.4

nx (global)            : 20.4.0
nx                     : 20.4.6
@nx/js                 : 20.4.6
@nx/jest               : 20.4.6
@nx/eslint             : 20.4.6
@nx/workspace          : 20.4.6
@nx/devkit             : 20.4.6
@nx/eslint-plugin      : 20.4.6
@nx/module-federation  : 20.4.6
@nx/nest               : 20.4.6
@nx/node               : 20.4.6
@nx/rspack             : 20.4.6
@nx/web                : 20.4.6
@nx/webpack            : 20.4.6
typescript             : 5.7.3
---------------------------------------
Registered Plugins:
@nx/webpack/plugin
@nx/eslint/plugin
@nx/jest/plugin
@nx/rspack/plugin

Failure Logs

 NX   Could not find any projects to migrate.

Package Manager Version

pnpm v. 9.10.0

Operating System

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

Additional Information

(re-opening closed issue #29482)

[rujorgensen]

@Coly010 @FrozenPandaz sorry for tagging, but I've had zero traction on my issues related to these matters (@nx/rspack), and this has been broken for our team since at least v. 20.2.2, locking our team's codebase to @nx/[email protected].

Can we at least get confirmation that this is a regression so we can start thinking about a path forward 🙂?

(also related, but closed since the interest appeared to die out: #29388, #29482)

[Coly010]

I will investigate this shortly and get it fixed.

[rujorgensen]

This is how our dependency update PR's, in our team, has been looking for months now.

[ndcunningham]

Hey @rujorgensen thanks for the issue.
Currently, this is not supported but we will support it shortly.

You listed two generators but here are their use-cases

• @nx/rspack:convert-config-to-rspack-plugin - Should be used to convert an application that already has a rspack.config which is not standard meaning the config does not use NxAppRspackPlugin and all the options are within the project.json executors under @nx:rspack/rspack
  So it would convert a config that looks similar to below (not-standard)

module.exports = composePlugins(
  withNx(),
  withReact()
);

• @nx/rspack:convert-webpack - Should be used to convert an application that is using webpack.config to use rspack.confg. There is a limitation with this generator, it only converts an application that is using executors inside project.json and not inferred targets. We should handle inferred targets as well which is your use-case after looking at the example repo.

I'll leave this open and attach the PR when it is handled.

[rujorgensen]

@ndcunningham Thanks, that sounds good :). We now get new issues when trying to migrate to the latest NX due to this, so it has become crucial for us to be able to generate a fresh working rspack configuration using the generator, allowing us to continue updating NX.

What kind of timeline are we looking at--is it something that is being worked on now? Is there somewhere we can track?

Just as a side comment on your second point; our current rspack configuration was generated on a webpack NestJS app, by using the NX generator, so the generator was working at some point during the past 1-2 years or so, and our repo is similar regarding executors, to the reproduction repo I posted here.

[jswhisperer]

$ npx nx generate convert-config-to-rspack-plugin                     1 ↵

 NX  Generating @nx/rspack:convert-config-to-rspack-plugin


 NX   The project api is using the '@nx/js:node' executor. At the moment, we do not support migrating such projects.

[rujorgensen]

it only converts an application that is using executors inside project.json and not inferred targets. We should handle inferred targets as well which is your use-case after looking at the example repo.

@ndcunningham I took a closer look at the second part of your comment regarding the targets, and the configuration actually looks different compared to the configuration we have in our mono repo (which initiated this entire chase).

I tried generating a fresh repository with a non-inferred (explicit?) target using the @nx/rspack:application generator, but without luck. I opened a new issue here #31204 (comment).

It would be incredibly helpful if I could just get a quick yes/no answer to the question:
Are you able to generate a fresh working NestJS application (using inferred/explicit targets or whatever), and convert the configuration to rspack?
If you could even provide a link to such a repo, it would instantly resolve our struggles, caused by the NX v. 20.1.4 regression, we've had over the past five months ❤️⭐.

[rujorgensen]

OK good news. I think I managed to end up with a minimal working setup. I still think there are issues, this time in the NxAppRspackPlugin, as it appears to be stripping data off the compiler.options, which is necessary later in the rspack build process (although it only fails while running the serve target, and not the build target).

I made a wrapper around the plugin to make it work temporarily:

const { NxAppRspackPlugin } = require('@nx/rspack/app-plugin');
const rspack = require('@rspack/core');
const { join } = require('path');

/**
 * NxAppRspackPlugin appears to be altering the compiler.options, removing eg. the optimization object.
 */
class CustomNxAppRspackPlugin extends NxAppRspackPlugin {
  apply(compiler) {
    const orignalOptions = structuredClone(compiler.options.optimization);
    if (compiler.options.optimization) {
      console.log('Applying CustomNxAppRspackPlugin, compiler.options.optimization there');
    }

    super.apply(compiler);

    if (!compiler.options.optimization) {
      console.log('CustomNxAppRspackPlugin applied, compiler.options.optimization now gone, re-appply');
      compiler.options.optimization = orignalOptions;
    }
  }
}

module.exports = {
  output: {
    path: join(__dirname, '../../dist/apps/nestjs-rspack'),
  },
  //  🚨 👇👇👇 I added this to the standard configuration generated by NX
  entry: {},
  //  🚨 👆👆👆 I added this to the standard configuration generated by NX
  optimization: {
    //  🚨 👇👇👇 I added this to the standard configuration generated by NX, as it appears to be necessary (see screenshot below)
    removeAvailableModules: true,
    //  🚨 👆👆👆 I added this to the standard configuration generated by NX, as it appears to be necessary (see screenshot below)
    minimizer: [
      new rspack.SwcJsMinimizerRspackPlugin({
        minimizerOptions: {
          // We need to disable mangling and compression for class names and function names for Nest.js to work properly
          // The execution context class returns a reference to the class/handler function, which is for example used for applying metadata using decorators
          // https://docs.nestjs.com/fundamentals/execution-context#executioncontext-class
          compress: {
            keep_classnames: true,
            keep_fnames: true,
          },
          mangle: {
            keep_classnames: true,
            keep_fnames: true,
          },
        },
      }),
    ],
  },
  plugins: [
    //  🚨 👇👇👇 I replaced NxAppRspackPlugin with a custom version, as it appears to strip off necessary build options
    new CustomNxAppRspackPlugin({
    //  🚨 👆👆👆 I replaced NxAppRspackPlugin with a custom version, as it appears to strip off necessary build options
      target: 'node',
      tsConfig: 'apps/nestjs-rspack/tsconfig.app.json',
      main: 'apps/nestjs-rspack/src/main.ts',
      outputHashing: 'none',
    }),
  ],
};

Here is a full minimal repo: https://github.com/rujorgensen/nx-nestjs-rspack-working. I will try to apply this configuration to our setup, and see how far it gets me this time. (edit: we now have a working main repo 🎉)

[konqi]

Looks like this is related. I'll try out your workaround.
Edit: Scratch that, it's not related, it's a duplicate 😉
Edit: Also, your workaround works. Thanks for that. If I find the time I'll check if this line, as mentioned in the other issue, is the culprit.

[konqi]

Yup, looks like that line is causing the issue. Let's see if my PR gets accepted. It's a very small change...