CRACO Babel Loader Plugin

1.0.3 verified Sat Apr 25 auth: no javascript maintenance

craco-babel-loader-plugin v1.0.3 is a CRACO plugin that allows overriding babel-loader configuration in Create React App projects to transpile dependencies (e.g., ES6+ or TypeScript) from node_modules or monorepo siblings. It is an updated fork of craco-babel-loader with TypeScript migration and latest @craco/craco support. Unlike alternatives, it provides explicit include/exclude options. Release cadence is low; last update May 2021.

Common errors

error Error: Cannot find module 'craco-babel-loader-plugin' ↓

cause Missing install or incorrect require path.

fix

npm install craco-babel-loader-plugin --save-dev

error TypeError: rewireBabelLoader is not a function ↓

cause Using import statement or incorrect require result structure.

fix

Use const rewireBabelLoader = require('craco-babel-loader-plugin').default;

error Module not found: Can't resolve 'babel-loader' ↓

cause babel-loader not installed or not available in CRA's webpack config.

fix

Ensure you have babel-loader installed: npm install babel-loader --save-dev

error Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. ↓

cause Incorrect options shape in craco config.

fix

Ensure plugin is wrapped in { plugin: ..., options: { includes: [...], excludes: [...] } }.

Warnings

breaking v1.0.0 changed to default export; require() returns { default: pluginFn }. ↓

fix Use const rewireBabelLoader = require('craco-babel-loader-plugin').default;

gotcha Options.includes and options.excludes must be absolute paths or regex. Relative paths will not resolve correctly. ↓

fix Use path.resolve or fs.realpathSync to construct absolute paths before passing to includes/excludes.

deprecated Original craco-babel-loader is unmaintained; this fork is the recommended replacement. ↓

fix Switch to craco-babel-loader-plugin v1.x.

gotcha react-scripts version must be compatible with @craco/craco; CRA 4 is supported but CRA 5 may break. ↓

fix Check @craco/craco compatibility with your react-scripts version.

breaking First release (1.0.0) migrated from Flow to TypeScript; TypeScript users should check types. ↓

fix Types are included; if missing, install @types/craco-babel-loader-plugin or define custom types.

Install

npm install craco-babel-loader-plugin

yarn add craco-babel-loader-plugin

pnpm add craco-babel-loader-plugin

Imports

rewireBabelLoader

wrong

import rewireBabelLoader from 'craco-babel-loader-plugin';

correct

const rewireBabelLoader = require('craco-babel-loader-plugin');

Plugin is CommonJS only; ESM import will fail. Use require() in craco.config.js.

plugin (via craco.config.js)

wrong

module.exports = { plugins: [ rewireBabelLoader ] };

correct

module.exports = { plugins: [{ plugin: rewireBabelLoader, options: {...} }] };

Must wrap in an object with plugin and options keys; passing the function directly won't work.

default export

wrong

const rewireBabelLoader = require('craco-babel-loader-plugin');

correct

const rewireBabelLoader = require('craco-babel-loader-plugin').default;

v1.0.0+ uses a default export; if require returns an object with .default, use that. Check package type.

Quickstart

Shows how to configure craco-babel-loader-plugin to transpile the isemail module from node_modules while keeping other node_modules excluded.

// craco.config.js
const path = require('path');
const fs = require('fs');
const rewireBabelLoader = require('craco-babel-loader-plugin');

const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = relativePath => path.resolve(appDirectory, relativePath);

module.exports = {
  plugins: [
    {
      plugin: rewireBabelLoader,
      options: {
        includes: [resolveApp('node_modules/isemail')],
        excludes: [/(node_modules|bower_components)/]
      }
    }
  ]
};