Registry / devops / babel-plugin-direct-import

babel-plugin-direct-import

JSON →
library1.0.0jsnpmunverified

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.

npm install babel-plugin-direct-import
INSTALL
IMPORT
SIG · BABEL-PLUGIN-DIREC
B
babel-plugin-direct-import
devopsjavascriptv1.0.0
Install
Import
Disk
Pass rate
0/ 6
Env Coverage0 / 6
glibc
1822
musl
1822
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 18226 runs
build_error
glibc
node 18226 runs
build_error
Code
Verified usage

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

default
module.exports = require('babel-plugin-direct-import')
import babelPluginDirectImport from 'babel-plugin-direct-import'
The plugin is a CommonJS module, so require() is the correct way to import it in Node.js.
plugin usage in .babelrc
{ "plugins": [ ["babel-plugin-direct-import", { "modules": ["@mui/material"] }] ] }
{ "plugins": [ ["babel-plugin-direct-import", ["@mui/material"]] ] }
Since v0.6.0, the plugin expects an object with a `modules` array, not an array directly.
plugin usage in babel.config.js
module.exports = { plugins: [ ["babel-plugin-direct-import", { modules: ["@mui/material"] }] ] };
module.exports = { plugins: [ ["babel-plugin-direct-import", ["@mui/material"]] ] };
Same as .babelrc: must use object format since v0.6.0.

Installs the plugin, configures it in .babelrc for MUI v5, and shows transformation of named imports to direct path imports.

npm install --save-dev babel-plugin-direct-import // .babelrc { "plugins": [ ["babel-plugin-direct-import", { "modules": ["@mui/material", "@mui/icons-material"] }] ] } // Input: import { Button, TextField } from '@mui/material'; import { Add as AddIcon } from '@mui/icons-material'; // Output: import Button from '@mui/material/Button/Button.js'; import TextField from '@mui/material/TextField/TextField.js'; import AddIcon from '@mui/icons-material/esm/Add.js';
Debug
Known issues
breakingConfiguration 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.
fix
Change to object format: "plugins": [["babel-plugin-direct-import", { "modules": ["@material-ui/core"] }]]
affects: >=0.6.0
gotchaNamespace 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.
fix
Use named imports instead: `import { Button } from '@mui/material'`
affects: >=0.0.0
gotchaVariable exports from a module are not mapped. For example, `export const blue = colors.blue;` won't be resolved to the original path.
fix
Use direct re-exports or named imports at the consumer side.
affects: >=0.0.0
deprecatedSupport for Material UI v4 (packages with `@material-ui/` scopes) is not explicitly maintained in recent versions, though it may still work.
fix
Upgrade to MUI v5 or pin plugin version to a compatible one.
affects: >=1.0.0
Errors
Common errors & fixes
Error: [BABEL] unknown: You gave us a visitor for the node type "ImportDeclaration" but it's not a valid type
Using an older version of Babel (v6) with this plugin, which is designed for Babel v7+.
fix
Upgrade Babel to v7+ or use a compatible plugin version.
TypeError: Cannot read property 'replace' of undefined
The plugin encountered an import it cannot parse, possibly a namespace import.
fix
Ensure you are using only named imports, not `import * as ...`.
Module not found: Can't resolve '@mui/material/Button/Button.js'
The direct path generated by the plugin does not match the actual file structure of the installed MUI version.
fix
Check that the MUI version is supported and that the modules list includes the correct packages. Run `npm ls @mui/material` to verify.
Upgrade
Version history
1.0.0latest on npm
Audit
Dependencies

No dependency data recorded yet.

Agent activity
4 hits · last 30 days
node
4
Resources
babel-plugin-direct-import — npm install babel-plugin-direct-import · libregistry