babel-plugin-direct-import

1.0.0 verified Sat Apr 25 auth: no javascript

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.

Common errors

error Error: [BABEL] unknown: You gave us a visitor for the node type "ImportDeclaration" but it's not a valid type ↓

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

error TypeError: Cannot read property 'replace' of undefined ↓

cause The plugin encountered an import it cannot parse, possibly a namespace import.

fix

Ensure you are using only named imports, not import * as ....

error Module not found: Can't resolve '@mui/material/Button/Button.js' ↓

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

Warnings

breaking 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. ↓

fix Change to object format: "plugins": [["babel-plugin-direct-import", { "modules": ["@material-ui/core"] }]]

gotcha 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. ↓

fix Use named imports instead: `import { Button } from '@mui/material'`

gotcha Variable 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.

deprecated Support 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.

Install

npm install babel-plugin-direct-import

yarn add babel-plugin-direct-import

pnpm add babel-plugin-direct-import

Imports

default

wrong

import babelPluginDirectImport from 'babel-plugin-direct-import'

correct

module.exports = require('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

wrong

{
  "plugins": [
    ["babel-plugin-direct-import", ["@mui/material"]]
  ]
}

correct

{
  "plugins": [
    ["babel-plugin-direct-import", { "modules": ["@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

wrong

module.exports = {
  plugins: [
    ["babel-plugin-direct-import", ["@mui/material"]]
  ]
};

correct

module.exports = {
  plugins: [
    ["babel-plugin-direct-import", { modules: ["@mui/material"] }]
  ]
};

Same as .babelrc: must use object format since v0.6.0.

Quickstart

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