babel-plugin-alias-config

0.1.0 verified Sat Apr 25 auth: no javascript

A Babel 7 plugin (v0.1.0, latest) that resolves import/require aliases using webpack resolve alias configs from various file formats (alias.config.js, webpack.config.js, jsconfig.json, tsconfig.json). Supports auto-discovery, dynamic imports, and path extension options. Current version is early-stage with limited adoption. Differentiates from similar plugins (e.g., babel-plugin-module-resolver) by reusing existing webpack alias configurations.

Common errors

error Error: Cannot find module '@babel/core' ↓

cause @babel/core not installed as dependency or peer dependency

fix

npm install --save-dev @babel/core

error SyntaxError: Unexpected token, expected ',' (12:5) in .babelrc ↓

cause Babel config file syntax error due to incorrect plugin array nesting

fix

Ensure options are inside a nested array: 'plugins': [['babel-plugin-alias-config', { ... }]]

error Can't resolve '@utils/helper' in file.js ↓

cause Alias not defined in config or config not found by plugin

fix

Check alias.config.js or specify config path: 'config': './alias.config.js'

error ENOENT: no such file or directory, open '.../webpack.config.js' ↓

cause Default config file path is './webpack.config.js'; if it doesn't exist, plugin throws

fix

Create a valid alias config file or set 'config' option to correct path

Warnings

breaking Plugin only supports Babel 7; will fail with Babel 6. ↓

fix Upgrade to Babel 7 or use babel-plugin-module-resolver for Babel 6 compatibility.

gotcha findConfig: true searches upward from the compiled file, which may pick unintended config files in monorepos or shared directories. ↓

fix Set findConfig: false and specify exact config path to avoid accidental overwrites.

gotcha noOutputExtension: false (default) adds file extension to resolved imports, which may break dynamic imports that omit extensions. ↓

fix Set noOutputExtension: true for extensionless imports if target environment resolves extensions.

deprecated No known deprecation warnings yet; package is early stage. ↓

fix Monitor GitHub for future updates.

Install

npm install babel-plugin-alias-config

yarn add babel-plugin-alias-config

pnpm add babel-plugin-alias-config

Imports

babel-plugin-alias-config
wrong
```
plugins: ['alias-config']
```
correct
```
plugins: ['babel-plugin-alias-config']
```
Plugin name must include 'babel-plugin-' prefix in Babel config array

Babel plugin options object

wrong

plugins: ['babel-plugin-alias-config', { config: './webpack.config.js' }]

correct

plugins: [['babel-plugin-alias-config', { config: './webpack.config.js' }]]

Options must be in nested array format per Babel convention

default export (no named exports)
wrong
```
import { aliasConfig } from 'babel-plugin-alias-config';
```
correct
```
const plugin = require('babel-plugin-alias-config');
```
Plugin exports a single function (default export); no named exports available

Quickstart

Shows installation, alias config, Babel setup, and usage of the plugin to resolve '@' and '@components' aliases.

// 1. Install
// npm install --save-dev babel-plugin-alias-config

// 2. Create alias config: alias.config.js
const path = require('path');
module.exports = {
  alias: {
    '@': path.resolve(__dirname, 'src'),
    '@components': path.resolve(__dirname, 'src/components'),
  },
  extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
};

// 3. Configure Babel: .babelrc
{
  "plugins": [
    ["babel-plugin-alias-config", {
      "config": "./alias.config.js"
    }]
  ]
}

// 4. Use alias in code
import Button from '@components/Button'; // resolves to src/components/Button
console.log(Button);