{"id":19043,"library":"babel-plugin-direct-import","title":"babel-plugin-direct-import","description":"A Babel plugin that transforms named imports from large libraries (like MUI) into direct path imports, reducing bundle size. Current stable version: 1.0.0. Release cadence is low, with main updates for dependency bumps. Key differentiators: focuses on MUI v4/v5, supports deep dependency analysis for correct path resolution, and integrates with Next.js. Unlike generic plugins (babel-plugin-lodash), it is designed specifically for MUI's export structure.","status":"active","version":"1.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/umidbekk/babel-plugin-direct-import","tags":["javascript","babel-plugin","modules","materia-ui"],"install":[{"cmd":"npm install babel-plugin-direct-import","lang":"bash","label":"npm"},{"cmd":"yarn add babel-plugin-direct-import","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-plugin-direct-import","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"The plugin is a CommonJS module, so require() is the correct way to import it in Node.js.","wrong":"import babelPluginDirectImport from 'babel-plugin-direct-import'","symbol":"default","correct":"module.exports = require('babel-plugin-direct-import')"},{"note":"Since v0.6.0, the plugin expects an object with a `modules` array, not an array directly.","wrong":"{\n  \"plugins\": [\n    [\"babel-plugin-direct-import\", [\"@mui/material\"]]\n  ]\n}","symbol":"plugin usage in .babelrc","correct":"{\n  \"plugins\": [\n    [\"babel-plugin-direct-import\", { \"modules\": [\"@mui/material\"] }]\n  ]\n}"},{"note":"Same as .babelrc: must use object format since v0.6.0.","wrong":"module.exports = {\n  plugins: [\n    [\"babel-plugin-direct-import\", [\"@mui/material\"]]\n  ]\n};","symbol":"plugin usage in babel.config.js","correct":"module.exports = {\n  plugins: [\n    [\"babel-plugin-direct-import\", { modules: [\"@mui/material\"] }]\n  ]\n};"}],"quickstart":{"code":"npm install --save-dev babel-plugin-direct-import\n\n// .babelrc\n{\n  \"plugins\": [\n    [\"babel-plugin-direct-import\", { \"modules\": [\"@mui/material\", \"@mui/icons-material\"] }]\n  ]\n}\n\n// Input:\nimport { Button, TextField } from '@mui/material';\nimport { Add as AddIcon } from '@mui/icons-material';\n\n// Output:\nimport Button from '@mui/material/Button/Button.js';\nimport TextField from '@mui/material/TextField/TextField.js';\nimport AddIcon from '@mui/icons-material/esm/Add.js';","lang":"javascript","description":"Installs the plugin, configures it in .babelrc for MUI v5, and shows transformation of named imports to direct path imports."},"warnings":[{"fix":"Change to object format: \"plugins\": [[\"babel-plugin-direct-import\", { \"modules\": [\"@material-ui/core\"] }]]","message":"Configuration format changed from array to object in v0.6.0. The old format \"plugins\": [[\"babel-plugin-direct-import\", [\"@material-ui/core\"]]] is no longer supported.","severity":"breaking","affected_versions":">=0.6.0"},{"fix":"Use named imports instead: `import { Button } from '@mui/material'`","message":"Namespace imports (e.g., `import * as MUI from '@mui/material'`) are not transformed and remain as-is. This can lead to larger bundles if used with tree-shaking expectation.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Use direct re-exports or named imports at the consumer side.","message":"Variable exports from a module are not mapped. For example, `export const blue = colors.blue;` won't be resolved to the original path.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Upgrade to MUI v5 or pin plugin version to a compatible one.","message":"Support for Material UI v4 (packages with `@material-ui/` scopes) is not explicitly maintained in recent versions, though it may still work.","severity":"deprecated","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Upgrade Babel to v7+ or use a compatible plugin version.","cause":"Using an older version of Babel (v6) with this plugin, which is designed for Babel v7+.","error":"Error: [BABEL] unknown: You gave us a visitor for the node type \"ImportDeclaration\" but it's not a valid type"},{"fix":"Ensure you are using only named imports, not `import * as ...`.","cause":"The plugin encountered an import it cannot parse, possibly a namespace import.","error":"TypeError: Cannot read property 'replace' of undefined"},{"fix":"Check that the MUI version is supported and that the modules list includes the correct packages. Run `npm ls @mui/material` to verify.","cause":"The direct path generated by the plugin does not match the actual file structure of the installed MUI version.","error":"Module not found: Can't resolve '@mui/material/Button/Button.js'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}