babel-loader-lerna-cra
Transpile Create-React-App imports in Lerna projects.
This package overrides the Webpack configuration of Create-React-App projects in a Lerna repo.
⚠️ Please Note
As with packages like React-App-Rewired...
Using babel-loader-lerna-cra
breaks the "guarantees" that Create React App provides. That is to say, you now "own" the configs. No support will be provided. Proceed with caution.
"Stuff can break" — Dan Abramov https://twitter.com/dan_abramov/status/1045809734069170176
The Problem
Many people are trying to use Create-React-App in a Lerna repo with a project structure similar to this:
my-lerna-project/├── lerna.json├── package.json└── packages ├── comp-a ├── comp-b ├── my-react-app-1 │ └── comp-a └── my-react-app-2 ├── comp-a └── comp-b
When running the React App, errors like these show up:
Error: You may need an appropriate loader to handle this file.
Failed to compile. ../comp-button/src/index.jsSyntaxError: .../monorepo-react/packages/comp-button/src/index.js: Unexpected token 2 | 3 | const Button = =>
These errors show up because the Webpack config in your Create-React-App does not look outside the React App's ./src
directory for additional import dirs. In fact, how could it? It has no idea how you would configure your monorepo.
The Solution
This module (babel-loader-lerna-cra
) allows you to configure Webpack config overrides in your Lerna project's package.json
file; allowing babel to transpile imported Lerna packages using dev
and prod
.
Usage
-
Install
babel-loader-lerna-cra
in your Lerna repo:npm i -D babel-loader-lerna-cra -
Configure the
package.json
in your Lerna root:imports
- glob pattern for imports that require transpilingapps
- glob pattern for app that need overriding
-
Boostrap your React Apps with Webpack overrides:
Note: you MUST complete step two first.
npx babel-loader-lerna-craYou should see this output:
babel-lerna-loader-cra: bootstraping...babel-lerna-loader-cra: config =babel-lerna-loader-cra: copying: my-react-app-1/... webpack.config.dev.js => backup.webpack.config.prod.jsbabel-lerna-loader-cra: copying: my-react-app-1/... webpack.config.replacement.js => webpack.config.dev.jsbabel-lerna-loader-cra: copying: my-react-app-1/... webpack.config.prod.js => backup.webpack.config.prod.jsbabel-lerna-loader-cra: copying: my-react-app-1/... webpack.config.replacement.js => webpack.config.prod.jsbabel-lerna-loader-cra: copying: my-react-app-2/... webpack.config.dev.js => backup.webpack.config.prod.jsbabel-lerna-loader-cra: copying: my-react-app-2/... webpack.config.replacement.js => webpack.config.dev.jsbabel-lerna-loader-cra: copying: my-react-app-2/... webpack.config.prod.js => backup.webpack.config.prod.jsbabel-lerna-loader-cra: copying: my-react-app-2/... webpack.config.replacement.js => webpack.config.prod.jsNote: you will need to bootstrap again when:
- Installing packages in CI
- When a new create-react-app is added