Breaking changes in Rsbuild v0.4.0

[chenjiahan]

This thread is used to collect planned breaking changes for Rsbuild v0.4.0.

[chenjiahan]

JavaScript API

The loadConfig method now returns both the contents of the config and the path to the config file:

import { loadConfig } from '@rsbuild/core';

// v0.3
const config = await loadConfig();

// v0.4
const { content, filePath } = await loadConfig();

[chenjiahan]

#1490

[chenjiahan]

Plugin React

Removed default source.transformImport config for antd v4 and @arco-design/web-react.

Configurations related to the UI library should be provided in the UI library-specific plugins, such as rsbuild-plugin-antd or rsbuild-plugin-arco.

• If your project is using antd v3 or v4, you can manually add the following config:

// rsbuild.config.ts
export default {
  source: {
    transformImport: [
      {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: true,
      },
    ],
  },
};

• If your project is using @arco-design/web-react, you can manually add the following config:

// rsbuild.config.ts
export default {
  source: {
    transformImport: [
      {
        libraryName: '@arco-design/web-react',
        libraryDirectory: 'es',
        camelToDashComponentName: false,
        style: true,
      },
      {
        libraryName: '@arco-design/web-react/icon',
        libraryDirectory: 'react-icon',
        camelToDashComponentName: false,
      },
    ],
  },
};

[chenjiahan]

#1492

[chenjiahan]

Rsbuild Config

output.disableFilenameHash

Rename output.disableFilenameHash to output.filenameHash.

• Type:

type FilenameHash = boolean;

• Default: true

• Before:

export default {
  output: {
    disableFilenameHash: true,
  }
};

• After:

export default {
  output: {
    filenameHash: false,
  }
};

[chenjiahan]

#1511

[chenjiahan]

Builtin PostCSS Plugins

Rsbuild v0.4.0 will remove the builtin postcss-flexbugs-fixes plugin.

This plugin is used to fix some flexbug's issues for IE 10 & 11. Considering that modern browsers no longer have these flex issues, we can remove this plugin to improve build performance.

If your project needs to be compatible with IE 10 & 11 and encounters these flex issues, you can manually add this plugin in Rsbuild:

• Install plugin:

npm add postcss-flexbugs-fixes -D

• Create postcss.config.cjs:

module.exports = {
  'postcss-flexbugs-fixes': {},
};

[chenjiahan]

#1507