yarn workspaces shared package does not load in create-react-app

Question

I am using yarn workspaces to maintain my monorepo with this structure:

root
|- package.json
|- packages
   | - frontend          -> create-react-app
       |- package.json
   | - shared            -> custom library
       |- package.json
   | - backend           -> nestjs
       |- package.json

My root package.json:

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

package.json of each package:

  "name": "@app/<package_name>",
  "version": "1.2102.0",
  "description": "",
  "author": "example",
  "repository": {
   ...
  },
  "scripts": {
   ...
  },

When I try to use my shared library in frontend package like so: import { something } from "@app/shared"; I get this error:

Module not found: Can't resolve '@app/shared' in '<path>\packages\frontend\src\<path>'

I tried to add dependency "@app/shared": "1.2102.0" into packages/frontend/package.json, but it was not helpful. Yarn does not spit any error or warnings.

It is caused by create-react-app? Is it supported? Or I am doing something wrong?

Also I need to point out that project is in pure JavaScript (not TypeScript). I have another TS monorepo also with cra and it works fine even without including my shared library into package.json.

Answer 1

make sure you add the package in the package.json dependencies where you want to use that other package.

also make sure you try re-running the project as hot eloading might not be enabled

Answer 2

After some research I found out that this is due to create-react-app limitations.

CRA does not allow any imports from outside the /src folder.

So there is unfortunately no fix for this issue and it is the expected behaviour of CRA.