resolve.dedupe

  • Type: string[]
  • Default: undefined
  • Version: >= 1.1.7

Force Rsbuild to resolve the specified packages from project root, which is useful for deduplicating packages and reducing the bundle size.

Example

For example, assume your project is based on React 18, and you are using the foo package that depends on React 17, then your project will have two different versions of the React:

app/ ├── src/ └── node_modules/ ├── foo/ │ └── node_modules/ │ ├── react (v17) │ └── react-dom (v17) ├── react (v18) └── react-dom (v18)

In this case, you can use the resolve.dedupe config to remove the duplicate React packages, and resolve all react and react-dom packages to /node_modules/react and /node_modules/react-dom:

rsbuild.config.ts
export default defineConfig({
  resolve: {
    dedupe: ['react', 'react-dom'],
  },
});

Note that using resolve.dedupe to unify different major versions of a package, it may cause some packages to fail because they may depend on specific versions of APIs or features.

For example, if foo depends on a React 17-specific API or feature, then unifying React 17 and React 18 with React 18 using resolve.dedupe may cause foo to fail.

How it works

resolve.dedupe is implemented based on resolve.alias, it will get the path of the specified package through require.resolve in the project root directory and set it to the alias.

In the above example, resolve.dedupe will be converted to the following alias config:

const alias = {
  react: '/app/node_modules/react',
  'react-dom': '/app/node_modules/react-dom',
};

The alias generated by resolve.dedupe will be merged with the configured resolve.alias in the project, and the resolve.alias config will take precedence when the keys are the same.