Socket
Socket
Sign inDemoInstall

craco-babel-loader-plugin

Package Overview
Dependencies
1
Maintainers
1
Versions
3
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

craco-babel-loader-plugin


Version published
Maintainers
1
Created

Readme

Source

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

Chores

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

License

MIT.

Keywords

FAQs

Last updated on 24 Jul 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc