#Interface: Resolve

The Resolve option is used to control the resolution behavior of Rspack.

#Properties

#alias?

optional alias?: Record<string, string | false | string[]>

Create aliases to import or require certain modules more easily.

#Default Value

undefined

#Examples

A trailing $ can also be added to the given object's keys to signify an exact match:

import { defineConfig } from '@lynx-js/rspeedy'
export default defineConfig({
  resolve: {
    alias: {
      xyz$: 'path/to/file.js',
    },
  },
})

which would yield these results:

import Test1 from 'xyz'; // Exact match, so path/to/file.js is resolved and imported
import Test2 from 'xyz/file.js'; // Not an exact match, normal resolution takes place

resolve.alias is useful to control how a npm package is resolved.

• Change react to @lynx-js/react:

import { defineConfig } from '@lynx-js/rspeedy'
import { createRequire } from 'module'
const require = createRequire(import.meta.url)
export default defineConfig({
  resolve: {
    alias: {
      react: require.resolve('@lynx-js/react'),
    },
  },
})

This allows you to use some third-party libraries that directly uses react as dependencies in ReactLynx.

• Force using the same version of dayjs:

import { defineConfig } from '@lynx-js/rspeedy'
import { createRequire } from 'module'
const require = createRequire(import.meta.url)
export default defineConfig({
  resolve: {
    alias: {
      dayjs: require.resolve('dayjs'),
    },
  },
})

Please note that this is dangerous, since all the dayjs(including the dependencies of a dependencies) is resolved to the version in the project. It may cause both compile-time and runtime errors due to version mismatch.

Setting resolve.alias to false will ignore a module.

import { defineConfig } from '@lynx-js/rspeedy'
export default defineConfig({
  resolve: {
    alias: {
      'ignored-module': false,
      './ignored-module': false,
    },
  },
})

#aliasStrategy?

optional aliasStrategy?: "prefer-tsconfig" | "prefer-alias"

Set the strategy for path alias resolution, to control the priority relationship between the paths option in tsconfig.json and the resolve.alias option of Rsbuild.

#Default Value

'prefer-tsconfig'

#Remarks

• prefer-tsconfig (default): The paths option in tsconfig.json will take precedence over the resolve.alias option of Rsbuild.
• prefer-alias: The resolve.alias option of Rsbuild will take precedence over the paths option in tsconfig.json.

#Example

import { defineConfig } from '@lynx-js/rspeedy'

export default defineConfig({
  resolve: {
    alias: {
      '@': './src',
    },
    aliasStrategy: 'prefer-alias',
  },
})

#dedupe?

optional dedupe?: string[]

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

#Default Value

undefined

#Remarks

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.

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.

#Example

Use tslib from the project root directory.

import { defineConfig } from '@lynx-js/rspeedy'

export default defineConfig({
  resolve: {
    dedupe: ['tslib'],
  },
})

#extensions?

optional extensions?: string[]

Lynx Default Changed

Automatically resolve file extensions when importing modules. This means you can import files without explicitly writing their extensions.

#Default Value

['.ts', '.tsx', '.mjs', '.js', '.jsx', '.json', '.cjs']

#Remarks

For example, if importing './index', Rsbuild will try to resolve using the following order:

• ./index.ts

• ./index.tsx

• ./index.mjs

• ./index.js

• ./index.jsx

• ./index.json

• ./index.cjs

The difference between resolve.extensions and tools.rspack.resolve.extensions:

resolve.extensions: Replaces the default list; pluginLynx still appends .cjs.

tools.rspack.resolve.extensions: Merges with the default configuration using webpack-merge.

#Example

export default {
  resolve: {
    extensions: ['.ts', '.tsx', '.js'],
  },
}