Breaking changes in Rspack v1.0.0

[chenjiahan]

Rspack v1.0.0 is scheduled to be released in July 2024.

This thread is used to collect and discuss planned breaking changes for Rspack v1.0.0.

[chenjiahan]

Remove rspackExperiments.emotion

Remove rspackExperiments.emotion, as it can be replaced by @swc/plugin-emotion.

• Install:

npm i @swc/plugin-emotion -D

• Configure:

module.exports = {
  module: {
    rules: [
      {
        test: /\.jsx$/,
        loader: "builtin:swc-loader",
        options: {
-         rspackExperiments: {
-            emotion: true,
-         },
          jsc: {
+           experimental: {
+             plugins: [["@swc/plugin-emotion", {}]],
+           },
          },
        },
      },
    ],
  },
};

[chenjiahan]

Example: https://github.com/rspack-contrib/rspack-examples/pull/86/files

[h-a-n-a]

Honestly, I was thinking of the status quo of wasm plugin. Exposing the wasm plugin is necessarily exposing the stability of internal SWC ast...

[chenjiahan]

Agreed, this is an issue that requires attention.

The good news is that SWC plugins like emotion/relay/styledComponents are maintained by the SWC team, so when users use the latest version of Rspack and these SWC plugins, they are expected to work properly.

[chenjiahan]

Related PR:

• feat: remove styled-components, emotion and relay in builtin swc-loader #6862
• fix: clean up dependencies and types for emotion / relay #6892

[hardfist]

experiments.css

Switch experiments.css to false by default to align with webpack @JSerFeng

[chenjiahan]

#6910

[hardfist]

ModuleConcatenationPlugin

Enable ModuleConcatenationPlugin by default in production to reduce bundle size and align with webpack @JSerFeng

[chenjiahan]

Remove rspackExperiments.relay

Remove rspackExperiments.relay, as it can be replaced by @swc/plugin-relay.

• Install:

npm i @swc/plugin-relay -D

• Configure:

module.exports = {
  module: {
    rules: [
      {
        test: /\.jsx$/,
        loader: "builtin:swc-loader",
        options: {
-         rspackExperiments: {
-           relay: true,
-         },
          jsc: {
+           experimental: {
+             plugins: [["@swc/plugin-relay", {}]],
+           },
          },
        },
      },
    ],
  },
};

[chenjiahan]

Related PR:

• feat: remove styled-components, emotion and relay in builtin swc-loader #6862
• fix: clean up dependencies and types for emotion / relay #6892

[chenjiahan]

Remove rspackExperiments.styledComponents

Remove rspackExperiments.styledComponents, as it can be replaced by @swc/plugin-styled-components.

• Install:

npm i @swc/plugin-styled-components -D

• Configure:

module.exports = {
  module: {
    rules: [
      {
        test: /\.jsx$/,
        loader: "builtin:swc-loader",
        options: {
-         rspackExperiments: {
-           styledComponents: {},
-         },
          jsc: {
+           experimental: {
+             plugins: [["@swc/plugin-styled-components", {}]],
+           },
          },
        },
      },
    ],
  },
};

[chenjiahan]

Related PR:

• feat: remove styled-components, emotion and relay in builtin swc-loader #6862
• fix: clean up dependencies and types for emotion / relay #6892

[chenjiahan]

Integrate lightningcss

• Step 1: Introduce lightningcss as an optional CSS minimizer.
• Step 2: If it works well, make lightningcss as the default CSS minimizer and remove swc_css.
• Step 3: Consider providing a builtin:lightningcss-loader like builtin:swc-loader, so users can use lightningcss to transform CSS.

Ref:

• Consider using lightningcss as a CSS minifier vercel/next.js#46536
• refactor: Add lightningcss mode for turbopack-css vercel/next.js#58471
• refactor: Add lightningcss mode for turbopack-css vercel/turborepo#6456

[chenjiahan]

@ahabhgk cc~

[ahabhgk]

Remove resolve.tsConfigPath, prefer resolve.tsConfig = string or resolve.tsConfig.configPath = string instead

[hardfist]

1. I'm not sure if we implement resolve hook, whether it can implement all the functionalities reoslve.plugins provide? if so, I think support resolve hook is enough for us
2. even we don't support resolve.plugins, we can still move resolve.tsConfig as native plugins(but not as resolver plugins)
3. if the native-resolver can meets the need of css-loader sass-loader and some common used commnity loaders, use native-resolver seems better for alignments between js resolver and css|sass resolver

[ahabhgk]

1. I don't think it's an easy thing to implement resolve.plugins before v1.0, this even need to refactor lots of code in oxc-resolver since enhanced-resolve is plugins composed together based on the plugin system, to align every detail for resolve.plugins is very hard.
2. In most cases the only usage for resolve.plugins is supporting tsconfig, IMO it's ok to keep it as an options in v1.0
3. I think feat!: use native resolver in loader #4945 is good enough, most loader are not using those incompatible api, only using resolver.resolve, the use case of those incompatible api is resolve.plugins I guess

[chenjiahan]

I would like to add some usage scenarios of resolve.plugins:

• ModuleScopePlugin of create-react-app
• pnp-webpack-plugin

[ceopaludetto]

Unplugin also relies on resolve plugins

• Resolve plugin of unplugin (webpack version)
• [Feature Request] support resolveId hook for rspack unjs/unplugin#311

[chenjiahan]

Related PR: #6872

[colinaaa]

Change the default value of optimization. chunkIds and optimization.moduleIds to 'natural' when mode === 'none'. This is the same as webpack. See: #6685 and #6692.

[LingyuCoder]

#6956

[h-a-n-a]

JavaScript APIs

[h-a-n-a]

Removed Compilation.currentNormalModuleHooks and mark most of the fields as readonly: #6859

[h-a-n-a]

Changed Compilation.errors and Compilation.warnings API from StatsError to JsRspackError: #6900

[h-a-n-a]

SWC Wasm plugin breaking #6887

[LingyuCoder]

Remove stats.modules[].profile.integration, it related to persistent cache which rspack has different design with webpack #6947

[h-a-n-a]

Remove fields from SwcJsMinimizerPlugin
#6950.
#6970.
Default value remains untouched.

[LingyuCoder]

use @swc/plugin-prefresh instead of the builtin one #7069

[abenhamdine]

public environnement variables must now be defined, even if empty, see web-infra-dev/rsbuild#3029 (comment)

[ahabhgk]

Refactor minimizer plugin options, see #7444