babel-plugin-tsconfig-paths-module-resolver

1.0.4 verified Sat Apr 25 auth: no javascript

A Babel plugin that integrates tsconfig path mapping into Babel by wrapping babel-plugin-module-resolver with tsconfig-paths. Version 1.0.4 (latest) uses tsconfig-paths and babel-plugin-module-resolver under the hood; maintained via renovate and semantic-release. Handles TypeScript path aliases (e.g., @/ → src/) without additional configuration. Key differentiators: thin wrapper (~100 SLOC) around battle-tested libraries, supports custom resolve functions from module-resolver.

Common errors

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

cause The tsconfig path alias is not recognized because tsconfig.json is missing or misconfigured, or the plugin is not correctly added.

fix

Ensure tsconfig.json has baseUrl and paths defined, and the plugin is listed in Babel config's plugins array as 'tsconfig-paths-module-resolver'.

error TypeError: Cannot read properties of undefined (reading 'compilerOptions') ↓

cause The plugin cannot find or parse tsconfig.json. Possibly file missing or malformed.

fix

Verify tsconfig.json exists in the project root and has valid JSON with compilerOptions object.

error Error: Config error: plugin 'tsconfig-paths-module-resolver' not found ↓

cause The package is not installed or Babel is unable to resolve it.

fix

Run 'npm install --save-dev babel-plugin-tsconfig-paths-module-resolver' and verify node_modules.

error Module build failed: TypeError: cloneNode is not a function ↓

cause Incompatible version of @babel/core or babel-plugin-module-resolver. The plugin depends on Babel 7 API.

fix

Upgrade @babel/core and babel-plugin-module-resolver to latest within major version 7.

Warnings

gotcha Plugin is a thin wrapper; most bugs come from babel-plugin-module-resolver or tsconfig-paths. Check those issues first. ↓

fix https://github.com/tleunen/babel-plugin-module-resolver/issues or https://github.com/dividab/tsconfig-paths/issues

breaking v1.0.2 fixed a 'resolvePath nesting issue' that could cause infinite loops with deeply nested path aliases. Upgrade if on <=1.0.1. ↓

fix Update to >=1.0.2

gotcha The plugin only works with Babel; it does not affect TypeScript's own compilation. Use tsc separately or rely on Babel's TypeScript preset. ↓

fix Ensure you have @babel/preset-typescript in your Babel config

deprecated No deprecation warnings known as of v1.0.4. However, babel-plugin-module-resolver has experimental features that may change. ↓

fix Monitor babel-plugin-module-resolver changelog for breaking changes

Install

npm install babel-plugin-tsconfig-paths-module-resolver

yarn add babel-plugin-tsconfig-paths-module-resolver

pnpm add babel-plugin-tsconfig-paths-module-resolver

Imports

default

wrong

import babelPluginTsconfigPaths from 'babel-plugin-tsconfig-paths-module-resolver'

correct

import 'babel-plugin-tsconfig-paths-module-resolver'

Used as a Babel plugin string name, not a runtime import. Do not import as a default export.

resolvePath

wrong

const { resolvePath } = require('babel-plugin-tsconfig-paths-module-resolver')

correct

import { resolvePath } from 'babel-plugin-tsconfig-paths-module-resolver'

CommonJS require works but the package ships TypeScript types; prefer ESM import for type safety.

createResolvePath
```
import { createResolvePath } from 'babel-plugin-tsconfig-paths-module-resolver'
```
Available since v1.0.0; used to customize resolution with tsconfig-paths.

Quickstart

Shows minimal Babel config to enable tsconfig path aliases using the plugin.

// Install: npm install --save-dev babel-plugin-tsconfig-paths-module-resolver
// .babelrc
{
  "presets": ["@babel/preset-env", "@babel/preset-typescript"],
  "plugins": ["tsconfig-paths-module-resolver"]
}
// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}
// Now in your source: import { hello } from '@/hello'
// will resolve to src/hello.ts