#Interface: TransformImport

The TransformImport option transforms the import paths to enable modular imports from subpaths of third-party packages, similar to the functionality provided by babel-plugin-import.

#Properties

#camelToDashComponentName?

optional camelToDashComponentName?: boolean

Whether to convert camelCase imports to kebab-case.

#Default Value

Rsbuild defaults this option to true.

#Example

• Input:

import { ButtonGroup } from 'foo'

• Output:

When set to true:

import ButtonGroup from 'foo/button-group'

When set to false:

import ButtonGroup from 'foo/ButtonGroup'

#customName?

optional customName?: string

Customize the transformed path.

#Default Value

undefined

#Remarks

You you can specify the format of the transformed path. For example, by setting it to my-lib/{{ camelCase member }}, you can convert the member into camelCase.

The following formats are supported:

• kebabCase: lowercase letters, words joined by hyphens. For example: my-variable-name.

• snakeCase: lowercase letters, words joined by underscores. For example: my_variable_name.

• camelCase: first letter lowercase, the first letter of each following word uppercase. For example: myVariableName.

• upperCase: uppercase letters, other characters unchanged. For example: MY-VARIABLE-NAME.

• lowerCase: lowercase letters, other characters unchanged. For example: my-variable-name.

#libraryDirectory?

optional libraryDirectory?: string

Used to splice the transformed path, the splicing rule is ${libraryName}/${libraryDirectory}/${member}, where member is the imported member.

#Default Value

'lib'

#Example

• Input:

import { Button } from 'foo'

• Output:

import Button from 'foo/lib/button'

#libraryName

libraryName: string

The original import path that needs to be transformed.

#Remarks

This option is required.

#transformToDefaultImport?

optional transformToDefaultImport?: boolean

Whether to convert import statements to default imports.

#Default Value

Rsbuild defaults this option to true.

#Example

• Input:

import { Button } from 'foo'

• Output:

When set to true:

import Button from 'foo/button'

When set to false:

import { Button } from 'foo/button'