This is an updated fork of craco-babel-loader that works with the latest versions of @craco/craco and create-react-app 4.

---

Rewire babel-loader configuration in your create-react-app project using @craco/craco.

Let's presume 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+ or Typescript. Since node_modules doesn't go through babel-loader, you cannot really use it.

Another common usecase is the one where the React app is part of a monorepo project where multiple sibling packages reside.

/packages
  |
  --/react-app
  |
  --/shared
  |
  --/server

Let's suppose inside /shared directory there is some Typescript code that both /react-app and /server import. The /shared directory will be treated as a dependency for /react-app and /server, and according to the monorepo setup, /shared will most likely be placed inside the node_modules directory of the other 2 packages.

Running /server with ts-node for example will successfully allow the Typescript code from /shared to be used at runtime. This is not the case with /react-app.

In order to obtain the same outcome in a create-react-app project that runs with react-scripts (check package.json -> scripts), we need to override the create-react-app babel configuration. For that we can use @craco/craco and this craco-babel-loader-plugin plugin.

See below for usage.

Install

1$ yarn add craco-babel-loader-plugin
2# npm v5+
3$ npm install craco-babel-loader-plugin
4# before npm v5
5$ npm install --save craco-babel-loader-plugin

Usage

1// craco.config.js
2
3const path = require("path");
4const fs = require("fs");
5
6const rewireBabelLoader = require("craco-babel-loader-plugin");
7
8// helpers
9
10const appDirectory = fs.realpathSync(process.cwd());
11const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
12
13module.exports = {
14  plugins: [
15        //This is a craco plugin: https://github.com/sharegate/craco/blob/master/packages/craco/README.md#configuration-overview
16        { plugin: rewireBabelLoader, 
17          options: { 
18            includes: [resolveApp("node_modules/isemail")], //put things you want to include in array here
19            excludes: [/(node_modules|bower_components)/] //things you want to exclude here
20            //you can omit include or exclude if you only want to use one option
21          }
22        }
23    ]
24}
25

Development

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

Chores

• Prettier: npm run pretty
• Build: npm run build

License

MIT.