Registry / babel-preset-rsuite

babel-preset-rsuite

library4.0.1jsnpmunverified

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.

npm install babel-preset-rsuite

package ↗homepage ↗

INSTALL

IMPORT

SIG · BABEL-PRESET-RSUIT

babel-preset-rsuite

javascriptv4.0.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

preset

✓ module.exports = { presets: ['rsuite'] };

✗ import presets from 'babel-preset-rsuite';

Used as a Babel preset in .babelrc or babel.config.js, not imported directly in user code.

default export

✓ require('babel-preset-rsuite')

✗ const rsuite = require('babel-preset-rsuite').default;

Package exposes a single default export (the preset) for Babel config.

options style

✓ ['rsuite', { style: true, theme: 'dark' }]

✗ ['rsuite', { style: true, theme: 'dark', libraryName: 'rsuite' }]

Options are passed as array entry in presets; do not include libraryName here, it is handled internally.

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');

Debug

Known issues

deprecatedbabel-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 }.

affects: >=4.0.0

gotchaPreset 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.

affects: >=3.0.0

gotchaOptions 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.

affects: >=1.0.0

breakingVersion 4.0.0 changed the default import transformation path; requires rsuite@next.

fix

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

affects: 4.0.0

gotchaWhen 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'] }.

affects: >=1.0.0

deprecatedThe 'customComponentName' option is no longer supported.

fix

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

affects: >=4.0.0

Errors

Common errors & fixes

Cannot find module 'babel-plugin-import'

Missing peer dependency babel-plugin-import.

fix

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

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

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

fix

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

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

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'] }.

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

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

fix

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

Upgrade

Version history

4.0.1latest on npm

Audit

Dependencies

babel-plugin-importrequiredCore plugin used to transform imports; must be installed as a peer dependency.

Agent activity

4 hits · last 30 days

node

Resources

packagehttps://www.npmjs.com/package/babel-preset-rsuite ↗

homepagehttps://rsuitejs.com ↗