babel-preset-rsuite

4.0.1 verified Sat Apr 25 auth: no javascript

A Babel preset for modularly importing rsuite components, transforming named imports from 'rsuite' to individual require() calls (e.g., 'rsuite/lib/Button'). Integrates with babel-plugin-import to enable tree-shaking and optional automatic CSS/less imports, including theme support (default, dark). Version 4.0.1 targets rsuite@next and is maintained by the rsuite team. Unlike manual import optimization, this preset automates code splitting and reduces bundle size for rsuite applications.

Common errors

error Cannot find module 'babel-plugin-import' ↓

cause Missing peer dependency babel-plugin-import.

fix

npm install --save-dev babel-plugin-import

error Error: .presets[0] must be a string, object, function, or an array of the previous (when using babel.config.js) ↓

cause Incorrect export format; preset should be a module.exports function.

fix

Use module.exports = { presets: ['rsuite'] }; instead of default export.

error Module not found: Error: Can't resolve 'rsuite/lib/Button/styles/index.less' ↓

cause Missing less-loader or style option enabled without proper webpack configuration.

fix

Install less-loader and configure webpack: { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }.

error TypeError: Cannot convert undefined or null to object (when using babel-preset-rsuite with options) ↓

cause Passed options incorrectly as second argument to preset without array syntax.

fix

Use array syntax: presets: [['rsuite', { style: true }]]

Warnings

deprecated babel-preset-rsuite may be deprecated in favor of direct use of babel-plugin-import with custom options. ↓

fix Consider configuring babel-plugin-import directly: { libraryName: 'rsuite', libraryDirectory: 'lib', style: true }.

gotcha Preset requires babel-plugin-import as a peer dependency; it is not included automatically. ↓

fix Ensure 'babel-plugin-import' is installed: npm install --save-dev babel-plugin-import.

gotcha Options like style and theme must be passed as an array (['rsuite', { style: true }]) not as a preset string. ↓

fix Use the array syntax when customizing options.

breaking Version 4.0.0 changed the default import transformation path; requires rsuite@next. ↓

fix Update rsuite to the 'next' tag: npm install rsuite@next.

gotcha When style: true, less files are imported; ensure a less loader is configured in your webpack. ↓

fix Add less-loader to your webpack config: { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }.

deprecated The 'customComponentName' option is no longer supported. ↓

fix Remove customComponentName from options; use babel-plugin-import directly if needed.

Install

npm install babel-preset-rsuite

yarn add babel-preset-rsuite

pnpm add babel-preset-rsuite

Imports

preset
wrong
```
import presets from 'babel-preset-rsuite';
```
correct
```
module.exports = { presets: ['rsuite'] };
```
Used as a Babel preset in .babelrc or babel.config.js, not imported directly in user code.
default export
wrong
```
const rsuite = require('babel-preset-rsuite').default;
```
correct
```
require('babel-preset-rsuite')
```
Package exposes a single default export (the preset) for Babel config.
options style
wrong
```
['rsuite', { style: true, theme: 'dark', libraryName: 'rsuite' }]
```
correct
```
['rsuite', { style: true, theme: 'dark' }]
```
Options are passed as array entry in presets; do not include libraryName here, it is handled internally.

Quickstart

Installs and configures the preset with style and dark theme, showing import transformation output.

// Install dependencies:
// npm install --save-dev babel-preset-rsuite@next babel-plugin-import
// npm install --save rsuite@next

// In .babelrc or babel.config.js:
module.exports = {
  presets: [
    ['rsuite', { style: true, theme: 'dark' }]
  ]
};

// Then in your source:
import { Button, Modal } from 'rsuite';
// Transforms to:
// require('rsuite/lib/Button/styles/themes/dark.less');
// var _Button = require('rsuite/lib/Button');
// require('rsuite/lib/Modal/styles/themes/dark.less');
// var _Modal = require('rsuite/lib/Modal');