babel-plugin-webpack-alias-7

0.1.1 verified Sat Apr 25 auth: no javascript maintenance

Babel 7 plugin that resolves webpack resolve aliases during Babel transpilation. Version 0.1.1, last updated in 2019, with no recent releases. It replaces require paths defined in webpack alias configuration, useful for unit testing environments where webpack is not used. Compared to the original Babel 6 version, it uses a simpler config option without lodash templates. The package is in early development and seeking feedback.

Common errors

error Error: Could not find plugin 'babel-plugin-webpack-alias-7' ↓

cause Plugin not installed or package name misspelled

fix

Run 'npm install --save-dev babel-plugin-webpack-alias-7' and ensure the package name is correct in .babelrc

error Error: Cannot find module 'webpack' ↓

cause webpack is not installed, but the plugin requires it to parse the webpack config

fix

Run 'npm install --save-dev webpack' or ensure webpack is a dependency

error Error: The 'findConfig' option is not supported ↓

cause Using option from Babel 6 version that was removed in this plugin

fix

Remove 'findConfig' option; see documentation for current options

error ReferenceError: __dirname is not defined ↓

cause Using ES modules and __dirname is not available in ESM context

fix

Use import.meta.url and fileURLToPath to get equivalent of __dirname

Warnings

gotcha Plugin is in early development and may have limited functionality compared to the Babel 6 version. ↓

fix Review the readme for changes; consider using the original Babel 6 plugin if more features are needed.

gotcha The plugin requires a webpack config file; if not specified, it looks for webpack.config.js or webpack.config.babel.js in the root. ↓

fix Ensure a webpack config file exists or provide the config option explicitly.

deprecated The 'findConfig' and 'noOutputExtension' options have been removed without replacement. ↓

fix Do not rely on these options; they are not available in this version.

breaking The config option no longer uses lodash templates, which may break configurations relying on that behavior. ↓

fix Remove lodash templates from the config path; use a static string path.

Install

npm install babel-plugin-webpack-alias-7

yarn add babel-plugin-webpack-alias-7

pnpm add babel-plugin-webpack-alias-7

Imports

default

wrong

import babelPluginWebpackAlias7 from 'babel-plugin-webpack-alias-7'

correct

// No import needed; add to .babelrc plugins array as 'babel-plugin-webpack-alias-7'

This is a Babel plugin, not a JavaScript module. It is configured via .babelrc or babel.config.js, not imported directly.

N/A (plugin usage)
wrong
```
plugins: [ 'babel-plugin-webpack-alias' ]
```
correct
```
plugins: [ ['babel-plugin-webpack-alias-7', { config: './webpack.config.js' }] ]
```
Do not use the Babel 6 version of the plugin name. Use 'babel-plugin-webpack-alias-7' with options object.
N/A (CommonJS)
wrong
```
require('babel-plugin-webpack-alias')
```
correct
```
require('babel-plugin-webpack-alias-7')
```
CommonJS require works in Node.js for Babel config files. Ensure correct package name.

Quickstart

Shows how to configure the plugin and use webpack aliases in Babel.

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

// webpack.config.js
var path = require('path');
module.exports = {
  resolve: {
    alias: {
      '@libs': path.join(__dirname, '/myLibs/')
    }
  }
};

// source.js
const myLib = require('@libs/myLib');
// transpiles to:
const myLib = require('/myLibs/myLib');