craco-babel-loader

1.0.4 verified Sat Apr 25 auth: no javascript

A CRACO plugin that allows you to rewire the babel-loader in your un-ejected create-react-app project to include or exclude custom paths (e.g., from node_modules) for transpilation. Version 1.0.4 is the latest stable release, supporting both @craco/craco v6 and v7. It fills a gap for CRA v2+ by enabling babel transpilation of external packages, which is especially useful for monorepos or when using ES6+ libraries from npm. Compared to alternatives like react-app-rewired, this plugin integrates directly with CRACO's configuration system and provides a simpler include/exclude API.

Common errors

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

cause Package not installed or missing from node_modules.

fix

Run 'npm install craco-babel-loader' or 'yarn add craco-babel-loader'.

error TypeError: plugin is not a function ↓

cause Incorrect import or destructuring; craco-babel-loader exports a function as default, not a named export.

fix

Use 'const rewireBabelLoader = require("craco-babel-loader");' and pass it as { plugin: rewireBabelLoader }.

error Error: Invalid plugin options: includes must be an array ↓

cause Passed a single path/string instead of an array for includes or excludes option.

fix

Wrap the path in an array: includes: [resolveApp('path/to/include')].

Warnings

breaking Requires @craco/craco v6.4.2 or v7.0.0; older versions are incompatible. ↓

fix Ensure @craco/craco is at least version 6.4.2 or 7.0.0.

gotcha The plugin only works with un-ejected create-react-app projects using CRACO. It does not work with react-app-rewired or ejected CRA. ↓

fix Use only with CRA + CRACO; for react-app-rewired, use react-app-rewire-babel-loader.

gotcha Options includes and excludes are arrays of paths or regexes; single values must be wrapped in an array. ↓

fix Always provide an array for includes/excludes: includes: ['/path'].

deprecated The package uses deprecated babel-loader APIs internally; may break with future babel-loader versions. ↓

fix Monitor babel-loader updates; consider switching to @craco/craco's built-in babel configuration if possible.

Install

npm install craco-babel-loader

yarn add craco-babel-loader

pnpm add craco-babel-loader

Imports

rewireBabelLoader
wrong
```
import rewireBabelLoader from 'craco-babel-loader';
```
correct
```
const rewireBabelLoader = require('craco-babel-loader');
```
CommonJS require is the standard pattern for CRACO config files, which are usually executed in Node.js without ESM support.
rewireBabelLoader
wrong
```
const rewireBabelLoader = require('craco-babel-loader').default;
```
correct
```
import rewireBabelLoader from 'craco-babel-loader';
```
Although CRACO configs typically use CommonJS, this package also exports an ESM default. Using .default is incorrect because the export is a direct function, not wrapped in a module object.
rewireBabelLoader
wrong
```
const { rewireBabelLoader } = require('craco-babel-loader');
```
correct
```
const rewireBabelLoader = require('craco-babel-loader');
```
The package exports a single function as default, not a named export. Destructuring will result in undefined.

Quickstart

Shows how to add craco-babel-loader as a plugin in a CRACO config file, specifying which node_modules directories to include or exclude from babel transpilation.

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

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

module.exports = {
  plugins: [
    {
      plugin: rewireBabelLoader,
      options: {
        includes: [resolveApp('node_modules/my-es6-package')],
        // optional excludes; defaults to /node_modules/
        excludes: [/node_modules\/other-package/]
      }
    }
  ]
};