craco-babel-loader-plugin

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

$ yarn add craco-babel-loader-plugin
# npm v5+
$ npm install craco-babel-loader-plugin
# before npm v5
$ npm install --save craco-babel-loader-plugin

Usage

// craco.config.js

const path = require("path");
const fs = require("fs");

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

// helpers

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

module.exports = {
  plugins: [
        //This is a craco plugin: https://github.com/sharegate/craco/blob/master/packages/craco/README.md#configuration-overview
        { plugin: rewireBabelLoader, 
          options: { 
            includes: [resolveApp("node_modules/isemail")], //put things you want to include in array here
            excludes: [/(node_modules|bower_components)/] //things you want to exclude here
            //you can omit include or exclude if you only want to use one option
          }
        }
    ]
}

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.