react-app-rewire-babel-loader

0.1.1 verified Sat Apr 25 auth: no javascript abandoned

A utility for use with react-app-rewired to allow customization of the babel-loader configuration in create-react-app projects without ejecting. Current stable version is 0.1.1, released with no further updates. It provides two functions, include and exclude, to add or remove npm modules from the babel-loader pipeline. This is a niche tool for developers who need to transpile specific node_modules packages that are not ES5, which create-react-app's default configuration excludes. No known alternatives for this specific purpose.

Common errors

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

cause The package is not installed or is not in the correct location.

fix

Run: npm install react-app-rewire-babel-loader --save-dev

error TypeError: rewireBabelLoader.include is not a function ↓

cause Using ES module import syntax with this CommonJS-only package.

fix

Change to: const rewireBabelLoader = require('react-app-rewire-babel-loader');

Warnings

breaking Requires react-app-rewired to be installed and configured. Without it, this package does nothing. ↓

fix Ensure react-app-rewired is installed and config-overrides.js is set up correctly.

deprecated Package is no longer maintained and may not work with latest create-react-app versions. ↓

fix Consider using craco or ejecting to customize webpack.

gotcha The include path must be an absolute path to the npm module's directory; relative paths will fail. ↓

fix Use path.resolve to get absolute path, e.g., path.resolve('node_modules/package').

Install

npm install react-app-rewire-babel-loader

yarn add react-app-rewire-babel-loader

pnpm add react-app-rewire-babel-loader

Imports

include

wrong

import { include } from 'react-app-rewire-babel-loader';

correct

const { include } = require('react-app-rewire-babel-loader');

This package does not support ES module imports. Use CommonJS require.

exclude

wrong

const exclude = require('react-app-rewire-babel-loader/exclude');

correct

const { exclude } = require('react-app-rewire-babel-loader');

Both functions are exported from the main entry; no subpath exports.

default

wrong

import rewireBabelLoader from 'react-app-rewire-babel-loader';

correct

const rewireBabelLoader = require('react-app-rewire-babel-loader');

Default export is an object with include and exclude methods.

Quickstart

Shows how to use include and exclude to customize babel-loader in CRA without ejecting.

// config-overrides.js
const path = require('path');
const fs = require('fs');
const rewireBabelLoader = require('react-app-rewire-babel-loader');

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

module.exports = function override(config, env) {
  // Include a specific npm module in babel transpilation
  config = rewireBabelLoader.include(
    config,
    resolveApp('node_modules/some-es6-package')
  );
  // Exclude node_modules from babel (default CRA behavior)
  config = rewireBabelLoader.exclude(
    config,
    /(node_modules|bower_components)/
  );
  return config;
};