website/docs/en/guide/migration/rspack_0.x.mdx
The document lists all breaking changes from Rspack 0.7 to 1.0. Use it as a migration reference.
See Breaking changes in Rspack 1.0 for details.
In Rspack 1.x, we have aligned the default configuration values with those of Webpack.
experiments.css has been deprecated and no longer enables default CSS processing.
In Rspack 0.x, experiments.css was enabled by default, which meant files ending with *.css were automatically treated as type: 'css/auto' and processed with built-in CSS logic.
Now, you must manually configure module.rules to handle CSS files. For example:
export default {
module: {
rules: [
{
test: /\.less$/,
type: 'css/auto', // 👈
use: ['less-loader'],
},
],
},
};
The default value of optimization.concatenateModules has been changed from false to:
true when mode is 'production'.false for other values of mode.In Rspack 1.x, module concatenation optimization has become more stable. Thus, it's now enabled by default in production mode, allowing multiple modules to be concatenated into a single module to reduce output size and improve compression efficiency.
The default value of devtool has been changed from false to:
eval when mode is 'development'.false for other values of mode.
@rspack/clioverrides the defaultdevtoolvalue from@rspack/core. Therefore, if you are using@rspack/cli, this change will not affect you.
The default value of experiments.asyncWebAssembly has been changed from false to depend on the experiments.futureDefaults configuration. It is enabled by default only when experiments.futureDefaults is set to true.
If you are using WebAssembly modules as asynchronous modules, you now need to manually set experiments.asyncWebAssembly to true.
The default value of splitChunks.cacheGroups.{cacheGroup}.reuseExistingChunk has been changed from true to false.
The default value of optimization.moduleIds has been changed to 'natural' when mode is none.
The default value of optimization.chunkIds has been changed to 'natural' when mode is none.
Please use resolve.tsConfig instead.
export default {
resolve: {
- tsConfigPath: path.resolve(__dirname, './tsconfig.json'),
+ tsConfig: path.resolve(__dirname, './tsconfig.json'),
},
};
Please use output.library.amdContainer instead.
To streamline the core, Rspack 1.x has removed the built-in SWC plugins. You now need to manually include them.
Use @swc/plugin-styled-components instead.
export default {
module: {
rules: [
{
test: /\.jsx$/,
loader: "builtin:swc-loader",
options: {
- rspackExperiments: {
- styledComponents: true,
- },
jsc: {
+ experimental: {
+ plugins: [["@swc/plugin-styled-components", {}]],
+ },
},
},
},
],
},
};
Use @swc/plugin-emotion instead.
export default {
module: {
rules: [
{
test: /\.jsx$/,
loader: "builtin:swc-loader",
options: {
- rspackExperiments: {
- emotion: true,
- },
jsc: {
+ experimental: {
+ plugins: [["@swc/plugin-emotion", {}]],
+ },
},
},
},
],
},
};
Use @swc/plugin-relay instead.
export default {
module: {
rules: [
{
test: /\.jsx$/,
loader: "builtin:swc-loader",
options: {
- rspackExperiments: {
- relay: true,
- },
jsc: {
+ experimental: {
+ plugins: [["@swc/plugin-relay", {}]],
+ },
},
},
},
],
},
};
Use @swc/plugin-prefresh instead.
export default {
module: {
rules: [
{
test: /\.jsx$/,
loader: "builtin:swc-loader",
options: {
- rspackExperiments: {
- preact: true,
- },
jsc: {
+ experimental: {
+ plugins: [["@swc/plugin-prefresh", {}]],
+ },
},
},
},
],
},
};
In Rspack 0.x, we used the built-in rspack.SwcCssMinimizerRspackPlugin to compress CSS size.
Now, we have removed it and replaced it with rspack.LightningCssMinimizerRspackPlugin to handle the same functionality.
If you previously manually registered and configured rspack.SwcCssMinimizerRspackPlugin, you should to switch to rspack.LightningCssMinimizerRspackPlugin:
import { rspack } from '@rspack/core';
export default {
optimization: {
minimizer: [
- new rspack.SwcCssMinimizerRspackPlugin({
+ new rspack.LightningCssMinimizerRspackPlugin({
// options
}),
],
},
};
Rspack's built-in and default-enabled JavaScript minimizer plugin has had its configuration aligned with SWC's minification configuration. The breaking changes are as follows:
minimizerOptions.passes: moved to minimizerOptions.compress.passesminimizerOptions.dropConsole: moved to minimizerOptions.compress.drop_consoleminimizerOptions.pureFuncs: moved to minimizerOptions.compress.pure_funcsminimizerOptions.keepClassNames: moved to minimizerOptions.mangle.keep_classnamesminimizerOptions.keepFnNames: moved to minimizerOptions.mangle.keep_fnamesminimizerOptions.comments: moved to minimizerOptions.format.commentsminimizerOptions.asciiOnly: moved to minimizerOptions.format.ascii_onlyDefault value changes:
comments (options.format.comments): changed from false to "some"We have aligned its configuration with html-webpack-plugin, with the following breaking changes:
excludedChunks has been renamed to excludeChunksmode is 'production', minify is now true by default@rspack/cli has upgraded its dependency on webpack-dev-server from v4 to v5. If you are using @rspack/cli, please be aware of the following breaking changes:
ResolverFactory and Resolver refactoring with RustResolverFactory and Resolver have been refactored with Rust to unify the implementations on the JS and Rust sides. Due to this change, ResolverFactory and Resolver currently do not support any hooks.
Additionally, Resolver now only supports the following methods:
resolveSyncresolvewithOptionsThis change might cause some plugins to become unusable.
:::tip
Rspack supports the NormalModuleFactory's resolve hook. In most cases, you can use this hook as a replacement for the Resolver's resolve hook to achieve the same functionality.
compiler.hooks.normalModuleFactory.tap('PLUGIN', (normalModuleFactory) => {
normalModuleFactory.hooks.resolve.tap('PLUGIN', (data) => {
// Redirect the module
if (data.request === './foo.js') {
data.request = './bar.js';
}
});
});
:::