Have ideas to improve npm?Join in the discussion! »

    @jaysonhwang/babel-loader-lerna-cra

    0.1.4 • Public • Published

    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.js
    SyntaxError: .../monorepo-react/packages/comp-button/src/index.js: Unexpected token (4:4)
     
      2 |
      3 | const Button = (type = 'button', children, onClick }) => (
    > 4 |     <div>
        |     ^
      5 |       <button type={type} className="button" onClick={onClick}>
      6 |         {children}
      7 |       </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

    1. Install babel-loader-lerna-cra in your Lerna repo:

      npm i -D babel-loader-lerna-cra
    2. Configure the package.json in your Lerna root:

      {
          "name": "root",
          "private": true,
          "devDependencies": {
              "babel-learna-loader-cra": "*"
          },
          "babel-loader-lerna-cra": {
              "imports": "packages/comp-*/src",
              "apps":  "packages/*react-app*"
          }
      }
      • imports - glob pattern for imports that require transpiling
      • apps - glob pattern for app that need overriding
    3. Boostrap your React Apps with Webpack overrides:

      Note: you MUST complete step two first.

      npx babel-loader-lerna-cra

      You should see this output:

      babel-lerna-loader-cra: bootstraping...
      babel-lerna-loader-cra: config = {
        lernaRoot: '../monorepo-react',
        settings: {
          imports: 'packages/comp-*/src',
          apps: 'packages/*react-app*'
        },
        apps: [
          '../packages/my-react-app-1',
          '../packages/my-react-app-2'
        ],
        imports: [
          '../packages/comp-a/src',
          '../packages/comp-a/src',
          '../packages/comp-b/src'
          ]
      }
      babel-lerna-loader-cra: copying: my-react-app-1/... webpack.config.dev.js => backup.webpack.config.prod.js
      babel-lerna-loader-cra: copying: my-react-app-1/... webpack.config.replacement.js => webpack.config.dev.js
      babel-lerna-loader-cra: copying: my-react-app-1/... webpack.config.prod.js => backup.webpack.config.prod.js
      babel-lerna-loader-cra: copying: my-react-app-1/... webpack.config.replacement.js => webpack.config.prod.js
      babel-lerna-loader-cra: copying: my-react-app-2/... webpack.config.dev.js => backup.webpack.config.prod.js
      babel-lerna-loader-cra: copying: my-react-app-2/... webpack.config.replacement.js => webpack.config.dev.js
      babel-lerna-loader-cra: copying: my-react-app-2/... webpack.config.prod.js => backup.webpack.config.prod.js
      babel-lerna-loader-cra: copying: my-react-app-2/... webpack.config.replacement.js => webpack.config.prod.js

      Note: you will need to bootstrap again when:

      1. Installing packages in CI
      2. When a new create-react-app is added

    Related issues

    Install

    npm i @jaysonhwang/babel-loader-lerna-cra

    DownloadsWeekly Downloads

    0

    Version

    0.1.4

    License

    MIT

    Unpacked Size

    10.7 kB

    Total Files

    9

    Last publish

    Collaborators

    • avatar