babel-loader

10.1.1 verified Sat Apr 25 auth: no javascript

Webpack loader that transpiles JavaScript/TypeScript files using Babel. Current stable version is 10.1.1, with a release cadence of minor/patch updates every few months. It integrates Babel's transformation pipeline into webpack's build process, supporting features like caching, customizing cache identifiers, and passing source maps. Key differentiators: it is the official Babel team supported loader, tightly integrated with webpack's module system, and supports both webpack and Rspack. It requires @babel/core as a peer dependency and works with Babel 7 or 8 beta. Compared to alternatives like esbuild-loader or swc-loader, babel-loader offers full Babel plugin ecosystem compatibility and extensive customization options for legacy browser support.

Common errors

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

cause Missing peer dependency @babel/core

fix

npm install --save-dev @babel/core

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

cause Missing Babel preset for JSX

fix

Add @babel/preset-react to the presets option

error Error: [BABEL] unknown: Requires Babel "^7.12.0 || ^8.0.0-beta.1" but was loaded with "7.8.3" ↓

cause Incompatible @babel/core version

fix

Update @babel/core to ^7.12.0 or higher

error Error: webpack < 5.61.0 is not supported by this babel-loader version ↓

cause babel-loader 10+ requires webpack >=5.61.0

fix

Update webpack to >=5.61.0

Warnings

breaking Version 10.0.0 dropped support for Node.js < 18.20.0 and webpack < 5.61.0 ↓

fix Upgrade Node.js to ^18.20.0 || ^20.10.0 || >=22.0.0 and webpack to >=5.61.0

breaking Version 10.0.0 changed cache hasher to use webpack's output.hashFunction ↓

fix If you relied on custom cache hash, ensure webpack's output.hashFunction is configured correctly

deprecated Version 9.x deprecated the 'caller' option check (removed in 10.0.0) ↓

fix Stop passing 'caller'; it is no longer validated

gotcha In versions < 9.1.0, external dependencies from Babel custom plugins were not passed to webpack, causing cache invalidation issues ↓

fix Upgrade to 9.1.0+ to pass external dependencies

gotcha Version 9.1.1 was a broken release; do not use it ↓

fix Upgrade to 9.1.2 or later

breaking Version 10.0.0 introduced a logger; any code that expects no logger may break ↓

fix If you rely on no logging, use webpack's infrastructure logging configuration

Install

npm install babel-loader

yarn add babel-loader

pnpm add babel-loader

Imports

babel-loader

wrong

const babelLoader = require('babel-loader');

correct

module.exports = { module: { rules: [ { test: /\.m?js$/, use: 'babel-loader' } ] } }

In webpack config, reference loader by name string, not imported object.

babel-loader

wrong

import { babelLoader } from 'babel-loader';

correct

import babelLoader from 'babel-loader';

Default export is a function (the loader), not a named export.

babel-loader
```
const babelLoader = require('babel-loader');
```
CommonJS require works in Node.js webpack configs.

Quickstart

Basic webpack configuration using babel-loader to transpile JavaScript files with @babel/preset-env and @babel/plugin-transform-runtime.

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
            plugins: ['@babel/plugin-transform-runtime']
          }
        }
      }
    ]
  }
};