react-app-rewire-babel-loader

Rewire babel-loader loader in your create-react-app project using react-app-rewired.

Say there is an awesome library you found on npm that you want to use within your un-ejected create-react-app project, but unfortunately, it's published in ES6+ (since node_modules doesn't go through babel-loader), so you cannot really use it.

However, with react-app-rewired and this library, react-app-rewire-babel-loader, you can use that awesome library you've found.

See below for usage.

🚨 Not maintained for react-app-rewired v2.x.x+

I'm not maintaining this library for react-app-rewired v2.x.x+.

Instead, please consider using: https://github.com/arackaf/customize-cra

The following essentially emulates react-app-rewire-babel-loader which you can copy & paste into your override config file:

1// NOTE as of customize-cra v0.2.11
2
3const { babelInclude, getBabelLoader } = require("customize-cra");
4
5const include = (config, ...includes) => {
6    return babelInclude(includes)(config);
7};
8
9const babelExclude = exclude => config => {
10  getBabelLoader(config).exclude = exclude;
11  return config;
12};
13
14const exclude = (config, ...excludes) => {
15    return babelExclude(excludes)(config);
16};

Install

1$ yarn add react-app-rewire-babel-loader
2# npm v5+
3$ npm install react-app-rewire-babel-loader
4# before npm v5
5$ npm install --save react-app-rewire-babel-loader

Usage

1// config-overrides.js
2// see: https://github.com/timarney/react-app-rewired
3
4const path = require("path");
5const fs = require("fs");
6
7const rewireBabelLoader = require("react-app-rewire-babel-loader");
8
9// helpers
10
11const appDirectory = fs.realpathSync(process.cwd());
12const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
13
14module.exports = function override(config, env) {
15
16  // white-list some npm modules to the babel-loader pipeline
17  // see: https://webpack.js.org/configuration/module/#rule-include
18
19  config = rewireBabelLoader.include(
20    config,
21    resolveApp("node_modules/isemail")
22  );
23
24  // black-list some modules from the babel-loader pipeline
25  // see: https://webpack.js.org/configuration/module/#rule-exclude
26
27  config = rewireBabelLoader.exclude(
28    config,
29    /(node_modules|bower_components)/
30  );
31
32  return config;
33
34};

Development

• node.js and npm. See: https://github.com/creationix/nvm#installation
• yarn. See: https://yarnpkg.com/en/docs/install
• npm dependencies. Run: yarn install

Chores

• Lint: yarn run lint
• Prettier: yarn run pretty
• Test: yarn run test
• Pre-publish: yarn run prepublish
• Build: yarn run build

License

MIT.