fix: clear cache before start dev server

src/commands/dev/client.ts

@@ -21,6 +21,7 @@ import {RspackMode, rspackConfigFactory} from '../../common/rspack/config';
 
 import type {Configuration, HttpProxyMiddlewareOptionsFilter} from 'webpack-dev-server';
 import type {NormalizedServiceConfig} from '../../common/models';
+import {clearCacheDirectory} from '../../common/rspack/utils';
 
 export async function watchClientCompilation(
     config: NormalizedServiceConfig,
@@ -156,6 +157,8 @@ async function buildDevServer(config: NormalizedServiceConfig) {
         // Rspack multicompiler dont work with lazy compilation
         const compiler = rspack(rspackConfigs[0]!);
         server = new RspackDevServer(options, compiler);
+        // Need to clean cache before start. https://github.com/web-infra-dev/rspack/issues/9025
+        clearCacheDirectory(rspackConfigs[0]!, logger);
     } else {
         const compiler = webpack(webpackConfigs);
         server = new WebpackDevServer(options, compiler);

src/common/rspack/config.ts

@@ -224,6 +224,13 @@ function configureExperiments({
             snapshot: {
                 managedPaths: config.watchOptions?.watchPackages ? [] : undefined,
             },
+            storage: {
+                type: 'filesystem',
+                directory:
+                    typeof config.cache === 'object' && 'cacheDirectory' in config.cache
+                        ? config.cache.cacheDirectory
+                        : undefined,
+            },
         },
         lazyCompilation,
     };

src/common/rspack/utils.ts

@@ -1,7 +1,30 @@
 import {prettyTime} from '../logger/pretty-time';
-
-import type {MultiStats} from '@rspack/core';
+import * as fs from 'node:fs';
+import * as path from 'node:path';
+import type {Configuration, MultiStats} from '@rspack/core';
 import type {Logger} from '../logger';
+import paths from '../../common/paths';
+
+export function clearCacheDirectory(config: Configuration, logger: Logger) {
+    if (!config.cache) {
+        return;
+    }
+
+    let cacheDirectory = path.join(paths.appNodeModules, '.cache/rspack');
+
+    if (
+        typeof config.experiments?.cache === 'object' &&
+        config.experiments.cache.type === 'persistent' &&
+        config.experiments.cache.storage?.directory
+    ) {
+        cacheDirectory = config.experiments.cache.storage?.directory;
+    }
+
+    if (fs.existsSync(cacheDirectory)) {
+        fs.rmdirSync(cacheDirectory, {recursive: true});
+        logger.message(`Rspack cache ${cacheDirectory} successfully cleared`);
+    }
+}
 
 export function rspackCompilerHandlerFactory(logger: Logger, onCompilationEnd?: () => void) {
     return async (err?: Error | null, stats?: MultiStats) => {