@backstage/cli 0.34.0-next.1 → 0.34.0-next.2

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # @backstage/cli
 
+## 0.34.0-next.2
+
+### Minor Changes
+
+- 923ceb2: **BREAKING**: The new app build based on [Rspack](https://rspack.dev/) is now the default, and the `EXPERIMENTAL_RSPACK` flag has been removed. To revert to the old behavior, set the `LEGACY_WEBPACK_BUILD` environment flag and install the following optional dependencies:
+
+  ```json
+  {
+    "dependencies": {
+      "@module-federation/enhanced": "^0.9.0",
+      "@pmmmwh/react-refresh-webpack-plugin": "^0.5.7",
+      "esbuild-loader": "^4.0.0",
+      "eslint-webpack-plugin": "^4.2.0",
+      "fork-ts-checker-webpack-plugin": "^9.0.0",
+      "mini-css-extract-plugin": "^2.4.2",
+      "terser-webpack-plugin": "^5.1.3",
+      "webpack": "^5.96.0",
+      "webpack-dev-server": "^5.0.0"
+    }
+  }
+  ```
+
+  If you do encounter a blocking issue that forces you to use the old WebPack build, please [open an issue](https://github.com/backstage/backstage/issues) explaining the problem. The WebPack build will be removed in a future release.
+
+- eda80c7: **BREAKING**: Removed support for `.icon.svg` imports, which have been deprecated since the 1.19 release.
+
+### Patch Changes
+
+- 8b1bf6e: Deprecated new frontend system config setting `app.experimental.packages` to just `app.packages`. The old config will continue working for the time being, but may be removed in a future release.
+- ead626f: The Node.js transform in `@backstage/cli/config/nodeTransformHooks.mjs` now supports the built-in type stripping in Node.js, which is enabled by default from v22.18.0.
+
 ## 0.34.0-next.1
 
 ### Minor Changes

package/asset-types/asset-types.d.ts

@@ -65,44 +65,6 @@ declare module '*.yaml' {
   export default src;
 }
 
-/**
- * @deprecated support for .icon.svg extensions are being removed, inline the SVG elements in a MUI SvgIcon instead.
- * @example
- * ```tsx
- * import SvgIcon from '@material-ui/core/SvgIcon';
- *
- * const MyIcon = () => (
- *   <SvgIcon>
- *     <g>
- *        <path d="..." />
- *      </g>
- *   </SvgIcon>
- * )
- * ```
- */
-declare module '*.icon.svg' {
-  import { ComponentType } from 'react';
-  import { SvgIconProps } from '@material-ui/core';
-
-  /**
-   * @deprecated support for .icon.svg extensions are being removed, inline the SVG elements in a MUI SvgIcon instead.
-   * @example
-   * ```tsx
-   * import SvgIcon from '@material-ui/core/SvgIcon';
-   *
-   * const MyIcon = () => (
-   *   <SvgIcon>
-   *     <g>
-   *        <path d="..." />
-   *      </g>
-   *   </SvgIcon>
-   * )
-   * ```
-   */
-  const Icon: ComponentType<SvgIconProps>;
-  export default Icon;
-}
-
 declare module '*.svg' {
   const src: string;
   export default src;

package/config/nodeTransformHooks.mjs

@@ -255,6 +255,18 @@ export async function load(url, context, nextLoad) {
     return nextLoad(url, { ...context, format });
   }
 
+  // If the Node.js version we're running supports TypeScript, i.e. type
+  // stripping, we hand over to the default loader. This is done for all cases
+  // except if we're loading a .ts file that's been resolved to CommonJS format.
+  // This is because these files aren't actually CommonJS in the Backstage build
+  // system, and need to be transformed to CommonJS.
+  if (
+    format === 'module-typescript' ||
+    (format === 'module-commonjs' && ext !== '.ts')
+  ) {
+    return nextLoad(url, { ...context, format });
+  }
+
   const transformed = await transformFile(fileURLToPath(url), {
     sourceMaps: 'inline',
     module: {

package/dist/modules/build/commands/package/build/command.cjs.js

@@ -15,7 +15,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var chalk__default = /*#__PURE__*/_interopDefaultCompat(chalk);
 
 async function command(opts) {
-  const rspack = process.env.EXPERIMENTAL_RSPACK ? require("@rspack/core") : void 0;
+  const webpack = process.env.LEGACY_WEBPACK_BUILD ? require("webpack") : void 0;
   const role$1 = await role.findRoleFromCommand(opts);
   if (role$1 === "frontend" || role$1 === "backend") {
     const configPaths = opts.config.map((arg) => {
@@ -29,7 +29,7 @@ async function command(opts) {
         targetDir: paths.paths.targetDir,
         configPaths,
         writeStats: Boolean(opts.stats),
-        rspack
+        webpack
       });
     }
     return buildBackend.buildBackend({
@@ -50,7 +50,7 @@ async function command(opts) {
       configPaths: [],
       writeStats: Boolean(opts.stats),
       isModuleFederationRemote: true,
-      rspack
+      webpack
     });
   }
   const roleInfo = cliNode.PackageRoles.getRoleInfo(role$1);

package/dist/modules/build/commands/package/start/startFrontend.cjs.js

@@ -3,20 +3,17 @@
 var fs = require('fs-extra');
 var path = require('path');
 require('yn');
-require('webpack');
+require('@rspack/core');
 require('react-dev-utils/FileSizeReporter');
 require('react-dev-utils/formatWebpackMessages');
-require('eslint-webpack-plugin');
-require('fork-ts-checker-webpack-plugin');
+require('eslint-rspack-plugin');
+require('ts-checker-rspack-plugin');
 require('html-webpack-plugin');
-require('@module-federation/enhanced/webpack');
 require('react-dev-utils/ModuleScopePlugin');
-require('@pmmmwh/react-refresh-webpack-plugin');
+require('@module-federation/enhanced/rspack');
 var paths = require('../../../../../lib/paths.cjs.js');
-require('../../../lib/bundler/optimization.cjs.js');
 require('lodash/pickBy');
 require('../../../../../lib/run.cjs.js');
-require('mini-css-extract-plugin');
 require('../../../../../lib/version.cjs.js');
 var hasReactDomClient = require('../../../lib/bundler/hasReactDomClient.cjs.js');
 require('@manypkg/get-packages');

package/dist/modules/build/commands/repo/build.cjs.js

@@ -16,8 +16,7 @@ var chalk__default = /*#__PURE__*/_interopDefaultCompat(chalk);
 
 async function command(opts, cmd) {
   let packages = await cliNode.PackageGraph.listTargetPackages();
-  const shouldUseRspack = Boolean(process.env.EXPERIMENTAL_RSPACK);
-  const rspack = shouldUseRspack ? require("@rspack/core") : void 0;
+  const webpack = process.env.LEGACY_WEBPACK_BUILD ? require("webpack") : void 0;
   if (opts.since) {
     const graph = cliNode.PackageGraph.fromPackages(packages);
     const changedPackages = await graph.listChangedPackages({
@@ -86,7 +85,7 @@ async function command(opts, cmd) {
           targetDir: pkg.dir,
           configPaths: buildOptions.config ?? [],
           writeStats: Boolean(buildOptions.stats),
-          rspack
+          webpack
         });
       }
     });

package/dist/modules/build/lib/buildFrontend.cjs.js

@@ -6,20 +6,17 @@ var bundle = require('./bundler/bundle.cjs.js');
 var moduleFederation = require('./bundler/moduleFederation.cjs.js');
 require('chalk');
 require('react-dev-utils/openBrowser');
-require('webpack');
-require('webpack-dev-server');
+require('@rspack/core');
+require('@rspack/dev-server');
 require('../../../lib/paths.cjs.js');
 var config = require('../../config/lib/config.cjs.js');
-require('eslint-webpack-plugin');
-require('fork-ts-checker-webpack-plugin');
+require('eslint-rspack-plugin');
+require('ts-checker-rspack-plugin');
 require('html-webpack-plugin');
-require('@module-federation/enhanced/webpack');
 require('react-dev-utils/ModuleScopePlugin');
-require('@pmmmwh/react-refresh-webpack-plugin');
-require('./bundler/optimization.cjs.js');
+require('@module-federation/enhanced/rspack');
 require('lodash/pickBy');
 require('../../../lib/run.cjs.js');
-require('mini-css-extract-plugin');
 require('../../../lib/version.cjs.js');
 require('yn');
 require('@manypkg/get-packages');
@@ -31,7 +28,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var fs__default = /*#__PURE__*/_interopDefaultCompat(fs);
 
 async function buildFrontend(options) {
-  const { targetDir, writeStats, configPaths, rspack } = options;
+  const { targetDir, writeStats, configPaths, webpack } = options;
   const packageJson = await fs__default.default.readJson(
     path.resolve(targetDir, "package.json")
   );
@@ -49,7 +46,7 @@ async function buildFrontend(options) {
       args: configPaths,
       fromPackage: packageJson.name
     }),
-    rspack
+    webpack
   });
 }
 

package/dist/modules/build/lib/builder/config.cjs.js

@@ -7,14 +7,12 @@ var commonjs = require('@rollup/plugin-commonjs');
 var resolve = require('@rollup/plugin-node-resolve');
 var postcss = require('rollup-plugin-postcss');
 var esbuild = require('rollup-plugin-esbuild');
-var svgr = require('@svgr/rollup');
 var dts = require('rollup-plugin-dts');
 var json = require('@rollup/plugin-json');
 var yaml = require('@rollup/plugin-yaml');
 var plugins = require('./plugins.cjs.js');
 var types = require('./types.cjs.js');
 var paths = require('../../../../lib/paths.cjs.js');
-var svgrTemplate = require('../../../../lib/svgrTemplate.cjs.js');
 var entryPoints = require('../../../../lib/entryPoints.cjs.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -25,7 +23,6 @@ var commonjs__default = /*#__PURE__*/_interopDefaultCompat(commonjs);
 var resolve__default = /*#__PURE__*/_interopDefaultCompat(resolve);
 var postcss__default = /*#__PURE__*/_interopDefaultCompat(postcss);
 var esbuild__default = /*#__PURE__*/_interopDefaultCompat(esbuild);
-var svgr__default = /*#__PURE__*/_interopDefaultCompat(svgr);
 var dts__default = /*#__PURE__*/_interopDefaultCompat(dts);
 var json__default = /*#__PURE__*/_interopDefaultCompat(json);
 var yaml__default = /*#__PURE__*/_interopDefaultCompat(yaml);
@@ -201,10 +198,6 @@ async function makeRollupConfigs(options) {
         }),
         json__default.default(),
         yaml__default.default(),
-        svgr__default.default({
-          include: /\.icon\.svg$/,
-          template: svgrTemplate.svgrTemplate
-        }),
         esbuild__default.default({
           target: "ES2022",
           minify: options.minify

package/dist/modules/build/lib/bundler/bundle.cjs.js

@@ -3,7 +3,7 @@
 var yn = require('yn');
 var fs = require('fs-extra');
 var path = require('path');
-var webpack = require('webpack');
+var core = require('@rspack/core');
 var FileSizeReporter = require('react-dev-utils/FileSizeReporter');
 var formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
 var config = require('./config.cjs.js');
@@ -15,7 +15,6 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var yn__default = /*#__PURE__*/_interopDefaultCompat(yn);
 var fs__default = /*#__PURE__*/_interopDefaultCompat(fs);
-var webpack__default = /*#__PURE__*/_interopDefaultCompat(webpack);
 var formatWebpackMessages__default = /*#__PURE__*/_interopDefaultCompat(formatWebpackMessages);
 var chalk__default = /*#__PURE__*/_interopDefaultCompat(chalk);
 
@@ -26,7 +25,7 @@ function applyContextToError(error, moduleName) {
   ${error}`;
 }
 async function buildBundle(options) {
-  const { statsJsonEnabled, schema: configSchema, rspack } = options;
+  const { statsJsonEnabled, schema: configSchema, webpack } = options;
   const paths$1 = paths.resolveBundlingPaths(options);
   const publicPaths = await paths.resolveOptionalBundlingPaths({
     targetDir: options.targetDir,
@@ -91,12 +90,10 @@ async function buildBundle(options) {
       { spaces: 2 }
     );
   }
-  if (rspack) {
-    console.log(
-      chalk__default.default.yellow(`\u26A0\uFE0F  WARNING: Using experimental RSPack bundler.`)
-    );
+  if (webpack) {
+    console.log(chalk__default.default.yellow(`\u26A0\uFE0F  WARNING: Using legacy WebPack bundler`));
   }
-  const { stats } = await build(configs, isCi, rspack);
+  const { stats } = await build(configs, isCi, webpack);
   if (!stats) {
     throw new Error("No stats returned");
   }
@@ -124,29 +121,27 @@ async function buildBundle(options) {
     );
   }
 }
-async function build(configs, isCi, rspack) {
-  const bundler = rspack ?? webpack__default.default;
-  const stats = await new Promise(
-    (resolve, reject) => {
-      bundler(configs, (err, buildStats) => {
-        if (err) {
-          if (err.message) {
-            const { errors: errors2 } = formatWebpackMessages__default.default({
-              errors: [err.message],
-              warnings: new Array(),
-              _showErrors: true,
-              _showWarnings: true
-            });
-            throw new Error(errors2[0]);
-          } else {
-            reject(err);
-          }
+async function build(configs, isCi, webpack) {
+  const bundler = webpack ?? core.rspack;
+  const stats = await new Promise((resolve, reject) => {
+    bundler(configs, (err, buildStats) => {
+      if (err) {
+        if (err.message) {
+          const { errors: errors2 } = formatWebpackMessages__default.default({
+            errors: [err.message],
+            warnings: new Array(),
+            _showErrors: true,
+            _showWarnings: true
+          });
+          throw new Error(errors2[0]);
         } else {
-          resolve(buildStats);
+          reject(err);
         }
-      });
-    }
-  );
+      } else {
+        resolve(buildStats);
+      }
+    });
+  });
   if (!stats) {
     throw new Error("Failed to compile: No stats provided");
   }

package/dist/modules/build/lib/bundler/config.cjs.js

@@ -1,13 +1,12 @@
 'use strict';
 
 var path = require('path');
-var webpack$1 = require('webpack');
-var ESLintPlugin = require('eslint-webpack-plugin');
-var ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+var core = require('@rspack/core');
+var ESLintRspackPlugin = require('eslint-rspack-plugin');
+var tsCheckerRspackPlugin = require('ts-checker-rspack-plugin');
 var HtmlWebpackPlugin = require('html-webpack-plugin');
-var webpack = require('@module-federation/enhanced/webpack');
 var ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
-var ReactRefreshPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
+var rspack = require('@module-federation/enhanced/rspack');
 var paths = require('../../../../lib/paths.cjs.js');
 var fs = require('fs-extra');
 var optimization = require('./optimization.cjs.js');
@@ -22,12 +21,9 @@ var ConfigInjectingHtmlWebpackPlugin = require('./ConfigInjectingHtmlWebpackPlug
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
-var webpack__default = /*#__PURE__*/_interopDefaultCompat(webpack$1);
-var ESLintPlugin__default = /*#__PURE__*/_interopDefaultCompat(ESLintPlugin);
-var ForkTsCheckerWebpackPlugin__default = /*#__PURE__*/_interopDefaultCompat(ForkTsCheckerWebpackPlugin);
+var ESLintRspackPlugin__default = /*#__PURE__*/_interopDefaultCompat(ESLintRspackPlugin);
 var HtmlWebpackPlugin__default = /*#__PURE__*/_interopDefaultCompat(HtmlWebpackPlugin);
 var ModuleScopePlugin__default = /*#__PURE__*/_interopDefaultCompat(ModuleScopePlugin);
-var ReactRefreshPlugin__default = /*#__PURE__*/_interopDefaultCompat(ReactRefreshPlugin);
 var fs__default = /*#__PURE__*/_interopDefaultCompat(fs);
 var pickBy__default = /*#__PURE__*/_interopDefaultCompat(pickBy);
 var yn__default = /*#__PURE__*/_interopDefaultCompat(yn);
@@ -83,7 +79,7 @@ async function createConfig(paths, options) {
     frontendConfig,
     moduleFederation,
     publicSubPath = "",
-    rspack
+    webpack
   } = options;
   const { plugins, loaders } = transforms.transforms(options);
   const validBaseUrl = resolveBaseUrl(frontendConfig, moduleFederation);
@@ -103,25 +99,30 @@ async function createConfig(paths, options) {
         sockPort: port
       }
     };
-    if (rspack) {
+    if (webpack) {
+      const ReactRefreshPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
+      plugins.push(new ReactRefreshPlugin(refreshOptions));
+    } else {
       const RspackReactRefreshPlugin = require("@rspack/plugin-react-refresh");
       plugins.push(new RspackReactRefreshPlugin(refreshOptions));
-    } else {
-      plugins.push(new ReactRefreshPlugin__default.default(refreshOptions));
     }
   }
   if (checksEnabled) {
+    const TsCheckerPlugin = webpack ? require("fork-ts-checker-webpack-plugin") : tsCheckerRspackPlugin.TsCheckerRspackPlugin;
+    const ESLintPlugin = webpack ? require("eslint-webpack-plugin") : ESLintRspackPlugin__default.default;
     plugins.push(
-      new ForkTsCheckerWebpackPlugin__default.default({
-        typescript: { configFile: paths.targetTsConfig, memoryLimit: 4096 }
+      new TsCheckerPlugin({
+        typescript: { configFile: paths.targetTsConfig, memoryLimit: 8192 }
       }),
-      new ESLintPlugin__default.default({
+      new ESLintPlugin({
+        cache: false,
+        // Cache seems broken
         context: paths.targetPath,
         files: ["**/*.(ts|tsx|mts|cts|js|jsx|mjs|cjs)"]
       })
     );
   }
-  const bundler = rspack ? rspack : webpack__default.default;
+  const bundler = webpack ? webpack : core.rspack;
   plugins.push(
     new bundler.ProvidePlugin({
       process: require.resolve("process/browser"),
@@ -139,15 +140,15 @@ async function createConfig(paths, options) {
         config: frontendConfig
       }
     };
-    if (rspack) {
+    if (webpack) {
+      plugins.push(new HtmlWebpackPlugin__default.default(templateOptions));
+    } else {
       plugins.push(
         new ConfigInjectingHtmlWebpackPlugin.ConfigInjectingHtmlWebpackPlugin(
           templateOptions,
           options.getFrontendAppConfigs
         )
       );
-    } else {
-      plugins.push(new HtmlWebpackPlugin__default.default(templateOptions));
     }
     plugins.push(
       new HtmlWebpackPlugin__default.default({
@@ -165,7 +166,7 @@ async function createConfig(paths, options) {
   }
   if (options.moduleFederation) {
     const isRemote = options.moduleFederation?.mode === "remote";
-    const AdaptedModuleFederationPlugin = rspack ? require("@module-federation/enhanced/rspack").ModuleFederationPlugin : webpack.ModuleFederationPlugin;
+    const AdaptedModuleFederationPlugin = webpack ? require("@module-federation/enhanced/webpack").ModuleFederationPlugin : rspack.ModuleFederationPlugin;
     const exposes = options.moduleFederation?.exposes ? Object.fromEntries(
       Object.entries(options.moduleFederation?.exposes).map(([k, v]) => [
         k,
@@ -233,15 +234,26 @@ async function createConfig(paths, options) {
   }
   const buildInfo = await readBuildInfo();
   plugins.push(
-    new bundler.DefinePlugin({
+    webpack ? new webpack.DefinePlugin({
       "process.env.BUILD_INFO": JSON.stringify(buildInfo),
-      "process.env.APP_CONFIG": rspack ? JSON.stringify([]) : bundler.DefinePlugin.runtimeValue(
+      "process.env.APP_CONFIG": webpack.DefinePlugin.runtimeValue(
         () => JSON.stringify(options.getFrontendAppConfigs()),
         true
       ),
       // This allows for conditional imports of react-dom/client, since there's no way
       // to check for presence of it in source code without module resolution errors.
-      "process.env.HAS_REACT_DOM_CLIENT": JSON.stringify(hasReactDomClient.hasReactDomClient())
+      "process.env.HAS_REACT_DOM_CLIENT": JSON.stringify(
+        hasReactDomClient.hasReactDomClient()
+      )
+    }) : new bundler.DefinePlugin({
+      "process.env.BUILD_INFO": JSON.stringify(buildInfo),
+      "process.env.APP_CONFIG": JSON.stringify([]),
+      // Inject via index.html instead
+      // This allows for conditional imports of react-dom/client, since there's no way
+      // to check for presence of it in source code without module resolution errors.
+      "process.env.HAS_REACT_DOM_CLIENT": JSON.stringify(
+        hasReactDomClient.hasReactDomClient()
+      )
     })
   );
   if (options.linkedWorkspace) {
@@ -252,7 +264,7 @@ async function createConfig(paths, options) {
       )
     );
   }
-  const reactRefreshFiles = rspack ? [] : [
+  const reactRefreshFiles = webpack ? [
     require.resolve(
       "@pmmmwh/react-refresh-webpack-plugin/lib/runtime/RefreshUtils.js"
     ),
@@ -260,7 +272,7 @@ async function createConfig(paths, options) {
       "@pmmmwh/react-refresh-webpack-plugin/overlay/index.js"
     ),
     require.resolve("react-refresh")
-  ];
+  ] : [];
   const mode = isDev ? "development" : "production";
   const optimization$1 = optimization.optimization(options);
   return {
@@ -304,7 +316,7 @@ async function createConfig(paths, options) {
         util: require.resolve("util/")
       },
       // FIXME: see also https://github.com/web-infra-dev/rspack/issues/3408
-      ...!rspack && {
+      ...webpack && {
         plugins: [
           new ModuleScopePlugin__default.default(
             [paths.targetSrc, paths.targetDev],
@@ -331,7 +343,7 @@ async function createConfig(paths, options) {
     },
     experiments: {
       lazyCompilation: yn__default.default(process.env.EXPERIMENTAL_LAZY_COMPILATION),
-      ...rspack && {
+      ...!webpack && {
         // We're still using `style-loader` for custom `insert` option
         css: false
       }

package/dist/modules/build/lib/bundler/optimization.cjs.js

@@ -1,9 +1,10 @@
 'use strict';
 
-const { EsbuildPlugin } = require("esbuild-loader");
+var core = require('@rspack/core');
+
 const optimization = (options) => {
-  const { isDev, rspack } = options;
-  const MinifyPlugin = rspack ? rspack.SwcJsMinimizerRspackPlugin : EsbuildPlugin;
+  const { isDev, webpack } = options;
+  const MinifyPlugin = webpack ? require("esbuild-loader").EsbuildPlugin : core.SwcJsMinimizerRspackPlugin;
   return {
     minimize: !isDev,
     minimizer: [
@@ -18,7 +19,7 @@ const optimization = (options) => {
         format: void 0,
         include: "remoteEntry.js"
       }),
-      rspack && new rspack.LightningCssMinimizerRspackPlugin()
+      webpack ? void 0 : new core.LightningCssMinimizerRspackPlugin()
     ],
     runtimeChunk: "single",
     splitChunks: {
@@ -44,7 +45,7 @@ const optimization = (options) => {
           priority: 10,
           minSize: 1e5,
           minChunks: 1,
-          ...!rspack && {
+          ...webpack && {
             maxAsyncRequests: Infinity,
             maxInitialRequests: Infinity
           }

package/dist/modules/build/lib/bundler/packageDetection.cjs.js

@@ -15,27 +15,22 @@ var PQueue__default = /*#__PURE__*/_interopDefaultCompat(PQueue);
 
 const DETECTED_MODULES_MODULE_NAME = "__backstage-autodetected-plugins__";
 function readPackageDetectionConfig(config$1) {
-  const packages = config$1.getOptional("app.experimental.packages");
+  const packages = config$1.getOptional("app.packages") ?? config$1.getOptional("app.experimental.packages");
   if (packages === void 0 || packages === null) {
     return void 0;
   }
   if (typeof packages === "string") {
     if (packages !== "all") {
       throw new Error(
-        `Invalid app.experimental.packages mode, got '${packages}', expected 'all'`
+        `Invalid app.packages mode, got '${packages}', expected 'all'`
       );
     }
     return {};
   }
   if (typeof packages !== "object" || Array.isArray(packages)) {
-    throw new Error(
-      "Invalid config at 'app.experimental.packages', expected object"
-    );
+    throw new Error("Invalid config at 'app.packages', expected object");
   }
-  const packagesConfig = new config.ConfigReader(
-    packages,
-    "app.experimental.packages"
-  );
+  const packagesConfig = new config.ConfigReader(packages, "app.packages");
   return {
     include: packagesConfig.getOptionalStringArray("include"),
     exclude: packagesConfig.getOptionalStringArray("exclude")

package/dist/modules/build/lib/bundler/server.cjs.js

@@ -4,8 +4,8 @@ var chalk = require('chalk');
 var fs = require('fs-extra');
 var path = require('path');
 var openBrowser = require('react-dev-utils/openBrowser');
-var webpack = require('webpack');
-var WebpackDevServer = require('webpack-dev-server');
+var core = require('@rspack/core');
+var devServer = require('@rspack/dev-server');
 var paths$1 = require('../../../../lib/paths.cjs.js');
 var config = require('../../../config/lib/config.cjs.js');
 var config$1 = require('./config.cjs.js');
@@ -17,8 +17,6 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var chalk__default = /*#__PURE__*/_interopDefaultCompat(chalk);
 var fs__default = /*#__PURE__*/_interopDefaultCompat(fs);
 var openBrowser__default = /*#__PURE__*/_interopDefaultCompat(openBrowser);
-var webpack__default = /*#__PURE__*/_interopDefaultCompat(webpack);
-var WebpackDevServer__default = /*#__PURE__*/_interopDefaultCompat(WebpackDevServer);
 
 async function serveBundle(options) {
   const paths$2 = paths.resolveBundlingPaths(options);
@@ -38,14 +36,14 @@ DEPRECATION WARNING: React Router Beta is deprecated and support for it will be
   const { name } = await fs__default.default.readJson(
     path.resolve(options.targetDir ?? paths$1.paths.targetDir, "package.json")
   );
-  let webpackServer = void 0;
+  let devServer$1 = void 0;
   let latestFrontendAppConfigs = [];
   const triggerReload = () => {
-    if (webpackServer) {
-      webpackServer.invalidate();
-      if (process.env.EXPERIMENTAL_RSPACK) {
-        webpackServer.sendMessage(
-          webpackServer.webSocketServer?.clients ?? [],
+    if (devServer$1) {
+      devServer$1.invalidate();
+      if (!process.env.LEGACY_WEBPACK_BUILD) {
+        devServer$1.sendMessage(
+          devServer$1.webSocketServer?.clients ?? [],
           "static-changed"
         );
       }
@@ -92,14 +90,14 @@ DEPRECATION WARNING: React Router Beta is deprecated and support for it will be
       triggerReload();
     }
   });
-  const rspack = process.env.EXPERIMENTAL_RSPACK ? require("@rspack/core") : void 0;
+  const webpack = process.env.LEGACY_WEBPACK_BUILD ? require("webpack") : void 0;
   const commonConfigOptions = {
     ...options,
     checksEnabled: options.checksEnabled,
     isDev: true,
     baseUrl: url,
     frontendConfig,
-    rspack,
+    webpack,
     getFrontendAppConfigs: () => {
       return latestFrontendAppConfigs;
     }
@@ -109,12 +107,10 @@ DEPRECATION WARNING: React Router Beta is deprecated and support for it will be
     additionalEntryPoints: detectedModulesEntryPoint,
     moduleFederation: options.moduleFederation
   });
-  const bundler = rspack ?? webpack__default.default;
-  const DevServer = rspack ? require("@rspack/dev-server").RspackDevServer : WebpackDevServer__default.default;
-  if (rspack) {
-    console.log(
-      chalk__default.default.yellow(`\u26A0\uFE0F  WARNING: Using experimental RSPack dev server.`)
-    );
+  const bundler = webpack ?? core.rspack;
+  const DevServer = webpack ? require("webpack-dev-server") : devServer.RspackDevServer;
+  if (webpack) {
+    console.log(chalk__default.default.yellow(`\u26A0\uFE0F  WARNING: Using legacy WebPack dev server.`));
   }
   const publicPaths = await paths.resolveOptionalBundlingPaths({
     entry: "src/index-public-experimental",
@@ -128,7 +124,7 @@ DEPRECATION WARNING: React Router Beta is deprecated and support for it will be
     );
   }
   const compiler = publicPaths ? bundler([config$2, await config$1.createConfig(publicPaths, commonConfigOptions)]) : bundler(config$2);
-  webpackServer = new DevServer(
+  devServer$1 = new DevServer(
     {
       hot: !process.env.CI,
       devMiddleware: {
@@ -172,8 +168,8 @@ DEPRECATION WARNING: React Router Beta is deprecated and support for it will be
     compiler
   );
   await new Promise(async (resolve, reject) => {
-    if (webpackServer) {
-      webpackServer.startCallback((err) => {
+    if (devServer$1) {
+      devServer$1.startCallback((err) => {
         if (err) {
           reject(err);
           return;
@@ -190,7 +186,7 @@ DEPRECATION WARNING: React Router Beta is deprecated and support for it will be
   const waitForExit = async () => {
     for (const signal of ["SIGINT", "SIGTERM"]) {
       process.on(signal, () => {
-        webpackServer?.stop();
+        devServer$1?.stop();
         process.exit();
       });
     }

package/dist/modules/build/lib/bundler/transforms.cjs.js

@@ -1,15 +1,10 @@
 'use strict';
 
-var MiniCssExtractPlugin = require('mini-css-extract-plugin');
-var svgrTemplate = require('../../../../lib/svgrTemplate.cjs.js');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var MiniCssExtractPlugin__default = /*#__PURE__*/_interopDefaultCompat(MiniCssExtractPlugin);
+var core = require('@rspack/core');
 
 const transforms = (options) => {
-  const { isDev, isBackend, rspack } = options;
-  const CssExtractRspackPlugin = rspack ? rspack.CssExtractRspackPlugin : MiniCssExtractPlugin__default.default;
+  const { isDev, isBackend, webpack } = options;
+  const CssExtractPlugin = webpack ? require("mini-css-extract-plugin") : core.CssExtractRspackPlugin;
   function insertBeforeJssStyles(element) {
     const head = document.head;
     const firstJssNode = head.querySelector("style[data-jss]");
@@ -25,7 +20,7 @@ const transforms = (options) => {
       exclude: /node_modules/,
       use: [
         {
-          loader: rspack ? "builtin:swc-loader" : require.resolve("swc-loader"),
+          loader: webpack ? require.resolve("swc-loader") : "builtin:swc-loader",
           options: {
             jsc: {
               target: "es2022",
@@ -51,7 +46,7 @@ const transforms = (options) => {
       exclude: /node_modules/,
       use: [
         {
-          loader: rspack ? "builtin:swc-loader" : require.resolve("swc-loader"),
+          loader: webpack ? require.resolve("swc-loader") : "builtin:swc-loader",
           options: {
             jsc: {
               target: "es2022",
@@ -78,29 +73,6 @@ const transforms = (options) => {
         fullySpecified: false
       }
     },
-    {
-      test: [/\.icon\.svg$/],
-      use: [
-        {
-          loader: rspack ? "builtin:swc-loader" : require.resolve("swc-loader"),
-          options: {
-            jsc: {
-              target: "es2022",
-              externalHelpers: !isBackend,
-              parser: {
-                syntax: "ecmascript",
-                jsx: !isBackend,
-                dynamicImport: true
-              }
-            }
-          }
-        },
-        {
-          loader: require.resolve("@svgr/webpack"),
-          options: { babel: false, template: svgrTemplate.svgrTemplate }
-        }
-      ]
-    },
     {
       test: [
         /\.bmp$/,
@@ -145,7 +117,7 @@ const transforms = (options) => {
           options: {
             insert: insertBeforeJssStyles
           }
-        } : CssExtractRspackPlugin.loader,
+        } : CssExtractPlugin.loader,
         {
           loader: require.resolve("css-loader"),
           options: {
@@ -158,7 +130,7 @@ const transforms = (options) => {
   const plugins = new Array();
   if (!isDev) {
     plugins.push(
-      new CssExtractRspackPlugin({
+      new CssExtractPlugin({
         filename: "static/[name].[contenthash:8].css",
         chunkFilename: "static/[name].[id].[contenthash:8].css",
         insert: insertBeforeJssStyles

package/dist/packages/cli/package.json.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var version = "0.34.0-next.1";
+var version = "0.34.0-next.2";
 var dependencies = {
 	"@backstage/catalog-model": "workspace:^",
 	"@backstage/cli-common": "workspace:^",
@@ -18,20 +18,16 @@ var dependencies = {
 	"@octokit/graphql-schema": "^13.7.0",
 	"@octokit/oauth-app": "^4.2.0",
 	"@octokit/request": "^8.0.0",
-	"@pmmmwh/react-refresh-webpack-plugin": "^0.5.7",
 	"@rollup/plugin-commonjs": "^26.0.0",
 	"@rollup/plugin-json": "^6.0.0",
 	"@rollup/plugin-node-resolve": "^15.0.0",
 	"@rollup/plugin-yaml": "^4.0.0",
+	"@rspack/core": "^1.4.11",
+	"@rspack/dev-server": "^1.1.4",
+	"@rspack/plugin-react-refresh": "^1.4.3",
 	"@spotify/eslint-config-base": "^15.0.0",
 	"@spotify/eslint-config-react": "^15.0.0",
 	"@spotify/eslint-config-typescript": "^15.0.0",
-	"@sucrase/webpack-loader": "^2.0.0",
-	"@svgr/core": "6.5.x",
-	"@svgr/plugin-jsx": "6.5.x",
-	"@svgr/plugin-svgo": "6.5.x",
-	"@svgr/rollup": "6.5.x",
-	"@svgr/webpack": "6.5.x",
 	"@swc/core": "^1.3.46",
 	"@swc/helpers": "^0.5.0",
 	"@swc/jest": "^0.2.22",
@@ -51,7 +47,6 @@ var dependencies = {
 	"css-loader": "^6.5.1",
 	"ctrlc-windows": "^2.1.0",
 	esbuild: "^0.25.0",
-	"esbuild-loader": "^4.0.0",
 	eslint: "^8.6.0",
 	"eslint-config-prettier": "^9.0.0",
 	"eslint-formatter-friendly": "^7.0.0",
@@ -62,9 +57,8 @@ var dependencies = {
 	"eslint-plugin-react": "^7.37.2",
 	"eslint-plugin-react-hooks": "^5.0.0",
 	"eslint-plugin-unused-imports": "^4.1.4",
-	"eslint-webpack-plugin": "^4.2.0",
+	"eslint-rspack-plugin": "^4.2.1",
 	express: "^4.17.1",
-	"fork-ts-checker-webpack-plugin": "^9.0.0",
 	"fs-extra": "^11.2.0",
 	"git-url-parse": "^15.0.0",
 	glob: "^7.1.7",
@@ -80,7 +74,6 @@ var dependencies = {
 	"jest-runtime": "^29.0.2",
 	"json-schema": "^0.4.0",
 	lodash: "^4.17.21",
-	"mini-css-extract-plugin": "^2.4.2",
 	minimatch: "^9.0.0",
 	"node-stdlib-browser": "^1.3.1",
 	"npm-packlist": "^5.0.0",
@@ -104,12 +97,10 @@ var dependencies = {
 	sucrase: "^3.20.2",
 	"swc-loader": "^0.2.3",
 	tar: "^6.1.12",
-	"terser-webpack-plugin": "^5.1.3",
+	"ts-checker-rspack-plugin": "^1.1.5",
 	"ts-morph": "^24.0.0",
 	undici: "^7.2.3",
 	util: "^0.12.3",
-	webpack: "^5.94.0",
-	"webpack-dev-server": "^5.0.0",
 	yaml: "^2.0.0",
 	yargs: "^16.2.0",
 	"yml-loader": "^2.1.0",
@@ -134,9 +125,7 @@ var devDependencies = {
 	"@backstage/plugin-scaffolder-node-test-utils": "workspace:^",
 	"@backstage/test-utils": "workspace:^",
 	"@backstage/theme": "workspace:^",
-	"@rspack/core": "^1.3.9",
-	"@rspack/dev-server": "^1.1.1",
-	"@rspack/plugin-react-refresh": "^1.4.2",
+	"@pmmmwh/react-refresh-webpack-plugin": "^0.5.7",
 	"@types/cross-spawn": "^6.0.2",
 	"@types/ejs": "^3.1.3",
 	"@types/express": "^4.17.6",
@@ -154,8 +143,15 @@ var devDependencies = {
 	"@types/webpack-sources": "^3.2.3",
 	"@types/yarnpkg__lockfile": "^1.1.4",
 	del: "^8.0.0",
+	"esbuild-loader": "^4.0.0",
+	"eslint-webpack-plugin": "^4.2.0",
+	"fork-ts-checker-webpack-plugin": "^9.0.0",
+	"mini-css-extract-plugin": "^2.4.2",
 	msw: "^1.0.0",
-	nodemon: "^3.0.1"
+	nodemon: "^3.0.1",
+	"terser-webpack-plugin": "^5.1.3",
+	webpack: "~5.96.0",
+	"webpack-dev-server": "^5.0.0"
 };
 
 exports.dependencies = dependencies;

package/dist/packages/core-components/package.json.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var version = "0.17.5-next.1";
+var version = "0.17.5-next.2";
 
 exports.version = version;
 //# sourceMappingURL=package.json.cjs.js.map

package/dist/packages/frontend-defaults/package.json.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var version = "0.3.0-next.2";
+var version = "0.3.0-next.3";
 
 exports.version = version;
 //# sourceMappingURL=package.json.cjs.js.map

package/dist/packages/frontend-plugin-api/package.json.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var version = "0.11.0-next.1";
+var version = "0.11.0-next.2";
 
 exports.version = version;
 //# sourceMappingURL=package.json.cjs.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/cli",
-  "version": "0.34.0-next.1",
+  "version": "0.34.0-next.2",
   "description": "CLI for developing Backstage plugins and apps",
   "backstage": {
     "role": "cli"
@@ -63,20 +63,16 @@
     "@octokit/graphql-schema": "^13.7.0",
     "@octokit/oauth-app": "^4.2.0",
     "@octokit/request": "^8.0.0",
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.7",
     "@rollup/plugin-commonjs": "^26.0.0",
     "@rollup/plugin-json": "^6.0.0",
     "@rollup/plugin-node-resolve": "^15.0.0",
     "@rollup/plugin-yaml": "^4.0.0",
+    "@rspack/core": "^1.4.11",
+    "@rspack/dev-server": "^1.1.4",
+    "@rspack/plugin-react-refresh": "^1.4.3",
     "@spotify/eslint-config-base": "^15.0.0",
     "@spotify/eslint-config-react": "^15.0.0",
     "@spotify/eslint-config-typescript": "^15.0.0",
-    "@sucrase/webpack-loader": "^2.0.0",
-    "@svgr/core": "6.5.x",
-    "@svgr/plugin-jsx": "6.5.x",
-    "@svgr/plugin-svgo": "6.5.x",
-    "@svgr/rollup": "6.5.x",
-    "@svgr/webpack": "6.5.x",
     "@swc/core": "^1.3.46",
     "@swc/helpers": "^0.5.0",
     "@swc/jest": "^0.2.22",
@@ -96,7 +92,6 @@
     "css-loader": "^6.5.1",
     "ctrlc-windows": "^2.1.0",
     "esbuild": "^0.25.0",
-    "esbuild-loader": "^4.0.0",
     "eslint": "^8.6.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-formatter-friendly": "^7.0.0",
@@ -107,9 +102,8 @@
     "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-unused-imports": "^4.1.4",
-    "eslint-webpack-plugin": "^4.2.0",
+    "eslint-rspack-plugin": "^4.2.1",
     "express": "^4.17.1",
-    "fork-ts-checker-webpack-plugin": "^9.0.0",
     "fs-extra": "^11.2.0",
     "git-url-parse": "^15.0.0",
     "glob": "^7.1.7",
@@ -125,7 +119,6 @@
     "jest-runtime": "^29.0.2",
     "json-schema": "^0.4.0",
     "lodash": "^4.17.21",
-    "mini-css-extract-plugin": "^2.4.2",
     "minimatch": "^9.0.0",
     "node-stdlib-browser": "^1.3.1",
     "npm-packlist": "^5.0.0",
@@ -149,12 +142,10 @@
     "sucrase": "^3.20.2",
     "swc-loader": "^0.2.3",
     "tar": "^6.1.12",
-    "terser-webpack-plugin": "^5.1.3",
+    "ts-checker-rspack-plugin": "^1.1.5",
     "ts-morph": "^24.0.0",
     "undici": "^7.2.3",
     "util": "^0.12.3",
-    "webpack": "^5.94.0",
-    "webpack-dev-server": "^5.0.0",
     "yaml": "^2.0.0",
     "yargs": "^16.2.0",
     "yml-loader": "^2.1.0",
@@ -168,7 +159,7 @@
     "@backstage/catalog-client": "1.11.0-next.0",
     "@backstage/config": "1.3.3",
     "@backstage/core-app-api": "1.18.0",
-    "@backstage/core-components": "0.17.5-next.1",
+    "@backstage/core-components": "0.17.5-next.2",
     "@backstage/core-plugin-api": "1.10.9",
     "@backstage/dev-utils": "1.1.13-next.1",
     "@backstage/errors": "1.2.7",
@@ -179,9 +170,7 @@
     "@backstage/plugin-scaffolder-node-test-utils": "0.3.2-next.0",
     "@backstage/test-utils": "1.7.11-next.0",
     "@backstage/theme": "0.6.8-next.0",
-    "@rspack/core": "^1.3.9",
-    "@rspack/dev-server": "^1.1.1",
-    "@rspack/plugin-react-refresh": "^1.4.2",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.7",
     "@types/cross-spawn": "^6.0.2",
     "@types/ejs": "^3.1.3",
     "@types/express": "^4.17.6",
@@ -199,22 +188,53 @@
     "@types/webpack-sources": "^3.2.3",
     "@types/yarnpkg__lockfile": "^1.1.4",
     "del": "^8.0.0",
+    "esbuild-loader": "^4.0.0",
+    "eslint-webpack-plugin": "^4.2.0",
+    "fork-ts-checker-webpack-plugin": "^9.0.0",
+    "mini-css-extract-plugin": "^2.4.2",
     "msw": "^1.0.0",
-    "nodemon": "^3.0.1"
+    "nodemon": "^3.0.1",
+    "terser-webpack-plugin": "^5.1.3",
+    "webpack": "~5.96.0",
+    "webpack-dev-server": "^5.0.0"
   },
   "peerDependencies": {
-    "@rspack/core": "^1.2.8",
-    "@rspack/dev-server": "^1.0.9",
-    "@rspack/plugin-react-refresh": "^1.0.0"
+    "@module-federation/enhanced": "^0.9.0",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.7",
+    "esbuild-loader": "^4.0.0",
+    "eslint-webpack-plugin": "^4.2.0",
+    "fork-ts-checker-webpack-plugin": "^9.0.0",
+    "mini-css-extract-plugin": "^2.4.2",
+    "terser-webpack-plugin": "^5.1.3",
+    "webpack": "~5.96.0",
+    "webpack-dev-server": "^5.0.0"
   },
   "peerDependenciesMeta": {
-    "@rspack/core": {
+    "@module-federation/enhanced": {
+      "optional": true
+    },
+    "@pmmmwh/react-refresh-webpack-plugin": {
+      "optional": true
+    },
+    "esbuild-loader": {
+      "optional": true
+    },
+    "eslint-webpack-plugin": {
+      "optional": true
+    },
+    "fork-ts-checker-webpack-plugin": {
+      "optional": true
+    },
+    "mini-css-extract-plugin": {
+      "optional": true
+    },
+    "terser-webpack-plugin": {
       "optional": true
     },
-    "@rspack/dev-server": {
+    "webpack": {
       "optional": true
     },
-    "@rspack/plugin-react-refresh": {
+    "webpack-dev-server": {
       "optional": true
     }
   },

package/dist/lib/svgrTemplate.cjs.js

@@ -1,23 +0,0 @@
-'use strict';
-
-function svgrTemplate({ imports, interfaces, componentName, props, jsx }, { tpl }) {
-  const name = `${componentName.replace(/icon$/, "")}Icon`;
-  const defaultExport = {
-    type: "ExportDefaultDeclaration",
-    declaration: { type: "Identifier", name }
-  };
-  return tpl`
-${imports}
-import SvgIcon from '@material-ui/core/SvgIcon';
-
-console.log('DEPRECATION WARNING: The .icon.svg extension is deprecated, inline the SVG elements in a MUI SvgIcon instead.', Object.assign(new Error(), {name: 'Warning'}).stack);
-
-${interfaces}
-
-const ${name} = (${props}) => React.createElement(SvgIcon, ${props}, ${jsx.children});
-
-${defaultExport}`;
-}
-
-exports.svgrTemplate = svgrTemplate;
-//# sourceMappingURL=svgrTemplate.cjs.js.map