How to import a common module in CRA using Yarn workspaces?

Question

I have a monorepo using Yarn workspaces. I have one package based on create-react-app which should import from a common module (sibling package in the repo).

This common package doesn't contain any React components. Just business logic. Its source is transpiled from Typescript. The common package works fine with my backend code in other packages.

Out of the box this doesn't work with CRA and gives me an error:

./src/App.tsx Module not found: Can't resolve '@gemini/common'

What do I need to do to configure CRA to find the module?

I found this open issue on CRA monorepo support, but I'm unsure how it relates and there's a lot of information in there.

Answer 1

Lets assume your structure is similar to

|- monorepo
  |- package.json
  |- packages
    |- cra
    |  |- package.json
    |
    |- common
      |- package.json

1. make sure workspaces are registered

// monorepo/packages.json

{
   "workspaces": {
    "packages": [
      "packages/*"
    ]
  },
}

2. the gemini package name need to match to required path

// monorepo/packages/gemini/package.json

{
  "name": "@gemini/common"
}

3. and last, use it as dependency in cra

// monorepo/packages/cra/package.json

{
  "dependencies": {
    "@gemini/common": "*"
  }
}

4. run yarn to link gemini in cra