{"id":19335,"library":"babel-preset-rsuite","title":"babel-preset-rsuite","description":"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.","status":"active","version":"4.0.1","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","babel-preset","react","rsuite"],"install":[{"cmd":"npm install babel-preset-rsuite","lang":"bash","label":"npm"},{"cmd":"yarn add babel-preset-rsuite","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-preset-rsuite","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core plugin used to transform imports; must be installed as a peer dependency.","package":"babel-plugin-import","optional":false}],"imports":[{"note":"Used as a Babel preset in .babelrc or babel.config.js, not imported directly in user code.","wrong":"import presets from 'babel-preset-rsuite';","symbol":"preset","correct":"module.exports = { presets: ['rsuite'] };"},{"note":"Package exposes a single default export (the preset) for Babel config.","wrong":"const rsuite = require('babel-preset-rsuite').default;","symbol":"default export","correct":"require('babel-preset-rsuite')"},{"note":"Options are passed as array entry in presets; do not include libraryName here, it is handled internally.","wrong":"['rsuite', { style: true, theme: 'dark', libraryName: 'rsuite' }]","symbol":"options style","correct":"['rsuite', { style: true, theme: 'dark' }]"}],"quickstart":{"code":"// Install dependencies:\n// npm install --save-dev babel-preset-rsuite@next babel-plugin-import\n// npm install --save rsuite@next\n\n// In .babelrc or babel.config.js:\nmodule.exports = {\n  presets: [\n    ['rsuite', { style: true, theme: 'dark' }]\n  ]\n};\n\n// Then in your source:\nimport { Button, Modal } from 'rsuite';\n// Transforms to:\n// require('rsuite/lib/Button/styles/themes/dark.less');\n// var _Button = require('rsuite/lib/Button');\n// require('rsuite/lib/Modal/styles/themes/dark.less');\n// var _Modal = require('rsuite/lib/Modal');","lang":"javascript","description":"Installs and configures the preset with style and dark theme, showing import transformation output."},"warnings":[{"fix":"Consider configuring babel-plugin-import directly: { libraryName: 'rsuite', libraryDirectory: 'lib', style: true }.","message":"babel-preset-rsuite may be deprecated in favor of direct use of babel-plugin-import with custom options.","severity":"deprecated","affected_versions":">=4.0.0"},{"fix":"Ensure 'babel-plugin-import' is installed: npm install --save-dev babel-plugin-import.","message":"Preset requires babel-plugin-import as a peer dependency; it is not included automatically.","severity":"gotcha","affected_versions":">=3.0.0"},{"fix":"Use the array syntax when customizing options.","message":"Options like style and theme must be passed as an array (['rsuite', { style: true }]) not as a preset string.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Update rsuite to the 'next' tag: npm install rsuite@next.","message":"Version 4.0.0 changed the default import transformation path; requires rsuite@next.","severity":"breaking","affected_versions":"4.0.0"},{"fix":"Add less-loader to your webpack config: { test: /\\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }.","message":"When style: true, less files are imported; ensure a less loader is configured in your webpack.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Remove customComponentName from options; use babel-plugin-import directly if needed.","message":"The 'customComponentName' option is no longer supported.","severity":"deprecated","affected_versions":">=4.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"npm install --save-dev babel-plugin-import","cause":"Missing peer dependency babel-plugin-import.","error":"Cannot find module 'babel-plugin-import'"},{"fix":"Use module.exports = { presets: ['rsuite'] }; instead of default export.","cause":"Incorrect export format; preset should be a module.exports function.","error":"Error: .presets[0] must be a string, object, function, or an array of the previous (when using babel.config.js)"},{"fix":"Install less-loader and configure webpack: { test: /\\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }.","cause":"Missing less-loader or style option enabled without proper webpack configuration.","error":"Module not found: Error: Can't resolve 'rsuite/lib/Button/styles/index.less'"},{"fix":"Use array syntax: presets: [['rsuite', { style: true }]]","cause":"Passed options incorrectly as second argument to preset without array syntax.","error":"TypeError: Cannot convert undefined or null to object (when using babel-preset-rsuite with options)"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}