Module build failure with less files

[its-me-dhina]

I recently migrated my web-app project from npm to pnpm and I started facing this issue. As per the suggestion I updated the rsbuild related package and now the less file compilation is failing. Below are the config and the error I am getting.

Error:

Changes:

rsbuild.config.ts

/* eslint-env node */
import { pluginModuleFederation } from "@module-federation/rsbuild-plugin";
import { defineConfig, loadEnv } from "@rsbuild/core";
import { pluginLess } from "@rsbuild/plugin-less";
import { pluginNodePolyfill } from "@rsbuild/plugin-node-polyfill";
import { pluginReact } from "@rsbuild/plugin-react";
import SentryWebpackPlugin from "@sentry/webpack-plugin";

import { dependencies as deps } from "./package.json";

const { publicVars, rawPublicVars } = loadEnv({ prefixes: ["REACT_APP"] });

const isDev = process.env.NODE_ENV === "development";

export default defineConfig({
  server: { port: 8000 },
  dev: {
    client: {
      host: "",
      port: "",
    },
  },
  source: {
    define: { ...publicVars, "process.env": JSON.stringify(rawPublicVars) },
    transformImport: [{ libraryName: "ym-antd", libraryDirectory: "es" }],
  },
  output: {
    distPath: {
      root: "build",
    },
    polyfill: "usage",
    sourceMap: isDev || process.env.GENERATE_SOURCEMAP === "true",
    cssModules: {
      exportLocalsConvention: "asIs",
    },
  },
  plugins: [
    pluginNodePolyfill(),
    pluginReact(),
    pluginLess({
      lessLoaderOptions: {
        lessOptions: {
          math: "always",
          javascriptEnabled: true,
          modifyVars: {
            "primary-color": "#007ED4",
          },
        },
      },
    }),
    pluginModuleFederation({
      name: "container",
      filename: "remoteEntry.js",
      shared: {
        ...deps,
        react: { singleton: true, requiredVersion: deps.react },
        "react-dom": {
          singleton: true,
          requiredVersion: deps["react-dom"],
        },
        "react-redux": {
          singleton: true,
          requiredVersion: deps["react-redux"],
        },
        "ym-antd/": {
          singleton: true,
          requiredVersion: deps["ym-antd"],
        },
        dayjs: {
          singleton: true,
          requiredVersion: deps.dayjs,
        },
        remixicon: {
          singleton: true,
          requiredVersion: deps.remixicon,
        },
        "react-router-dom": {
          singleton: true,
          requiredVersion: deps["react-router-dom"],
        },
        "@tanstack/react-query": {
          singleton: true,
          requiredVersion: deps["@tanstack/react-query"],
        },
      },
    }),
  ],
  html: {
    template: "./public/index.html",
  },
  performance: {
    removeMomentLocale: true,
    // bundleAnalyze: {},
  },
  tools: {
    /** There is a bug in lightningcss where comma seperated global styles doesn't get applied
     *  Eg; 
     * :global {
          .ant-menu-item:active,
          .ant-menu-submenu-title:active {
            background: unset !important;
          }
        }  -> this will not get applied but :global(.ant-menu-item:active), :global(.ant-menu-submenu-title:active) will get applied
     */
    lightningcssLoader: false,
    /**
     * .ant-form-item-control {
         flex: 1 1 0;
        }
        The unitless flex-basis 0 gets transformed to 0px instead of 0% which causes layout issues
     */
    postcss: (opts, { addPlugins }) => {
      // eslint-disable-next-line @typescript-eslint/no-var-requires
      addPlugins(require("postcss-flexbugs-fixes"));
    },
    rspack: {
      module: {
        rules: [
          {
            test: [/src[\\/]images[\\/]icons[\\/]index.ts/i],
            sideEffects: false,
          },
          {
            test: /\.worker\.js$/,
            loader: "worker-rspack-loader",
          },
        ],
      },
      resolve: {
        /**
         * Encountered module resolution error for the canvas package, which is a dependency of strophe.js in a web environment, as it
         * tries to use Node.js-specific modules that aren't available in the browser.
         * Setting canvas: false tells the bundler rspack not to try to polyfill or bundle the Node.js canvas module
         */
        fallback: {
          canvas: false,
        },
      },
      plugins: [
        process.env.SENTRY_UPLOAD == "true" &&
          new SentryWebpackPlugin({
            release: process.env.SENTRY_RELEASE,
            include: "./build",
            configFile: ".sentryclirc",
          }),
      ],
    },
  },
});

[chenjiahan]

This issue might be similar to: #5688