babel-plugin-module-resolve

1.7.0 verified Sat Apr 25 auth: no javascript maintenance

A Babel plugin that allows module imports using Webpack-like aliases and custom root directories, resolving paths similar to webpack's enhanced-resolve. Version 1.7.0 (current stable) last released in 2022 with low release cadence. It supports both custom alias configuration and automatic usage of jsconfig/tsconfig paths, making it a lightweight alternative to babel-plugin-module-resolver. Includes TypeScript types and supports ESM and CJS import patterns.

Common errors

error Error: Cannot find module '@utils' ↓

cause Alias not configured or roots not set correctly.

fix

Add alias in plugin options: { alias: { '@utils': './src/utils' } }

error Module not found: Can't resolve 'components/Button' in '/path/to/file' ↓

cause Alias is not resolving the path correctly.

fix

Check that the alias mapping is correct and the directory exists. Use absolute paths if needed.

Warnings

gotcha Plugin uses enhanced-resolve internally; resolving behavior may differ from Babel's default path resolution for symlinks or non-standard file structures. ↓

fix Test paths thoroughly; if issues arise, use absolute paths in alias.

breaking Version 1.0 changed default alias from mapping '@' to 'src' to no default alias unless specified in config or tsconfig. ↓

fix If upgrading from <1.0, explicitly configure alias or use tsconfig paths.

gotcha Plugin resolves based on the file's location, not the project root. Relative aliases may behave unexpectedly. ↓

fix Use absolute paths in alias or set roots to an absolute path.

Install

npm install babel-plugin-module-resolve

yarn add babel-plugin-module-resolve

pnpm add babel-plugin-module-resolve

Imports

default
wrong
```
import plugin from 'babel-plugin-module-resolve'
```
correct
```
module.exports = require('babel-plugin-module-resolve')
```
For use in .babelrc or Babel config files; import is not used directly in code. Plugin is CommonJS by default.

plugin

wrong

plugins: ['babel-plugin-module-resolve']

correct

plugins: [['module-resolve', { roots: ['./src'] }]]

Plugin name in config is 'module-resolve', not the full package name.

Quickstart

Basic setup with alias configuration to simplify import paths.

// Install: npm install --save-dev babel-plugin-module-resolve
// In .babelrc or babel.config.js:
{
  "plugins": [
    ["module-resolve", {
      "roots": ["./src"],
      "alias": {
        "@utils": "./src/utils",
        "components": "./src/components"
      }
    }]
  ]
}
// Now import using alias:
import { helper } from '@utils/helper'; // resolves to ./src/utils/helper