create-react-app: Can't use a CRA project inside Yarn Workspaces

Is this a bug report?

Yes

Can you also reproduce the problem with npm 4.x?

I am using npm 4.6.1 and its a yarn specific bug anyways.

Which terms did you search for in User Guide?

I simply searched the github repo for workspace and yarn workspace I didn’t see a relevant error message/issue.

Environment

node -v: 8.4.0
npm -v: 4.6.1
yarn --version: 0.27.5
npm ls react-scripts: Empty (no scripts to use)

Then, specify:

Operating system: OSX El Capitan 10.11.6

Steps to Reproduce

https://github.com/thomas-jeepe/err-demo

mkdir err-demo
cd err-demo
touch .yarnrc
echo "workspaces-experimental true" > .yarnrc
touch package.json
Write

{
  "name": "meme",
  "version": "1.0.0",
  "main": "index.js",
  "private": true,
  "workspaces": ["packages/*"]
}

to package.json 7. mkdir packages 8. cd packages 9. create-react-app test

Or: https://github.com/thomas-jeepe/err-demo/

Expected Behavior

create-react-app would use the tools installed at the workspace level.

Actual Behavior

Doesn’t find the tools and just complains:

Aborting installation.
Unexpected error. Please report it as a bug:
{ Error: Cannot find module '/Users/PenguinSoccer/code/js/err-demo/packages/test/node_modules/react-scripts/package.json'
    at Function.Module._resolveFilename (module.js:489:15)
    at Function.Module._load (module.js:439:25)
    at Module.require (module.js:517:17)
    at require (internal/module.js:11:18)
    at checkNodeVersion (/Users/PenguinSoccer/.config/yarn/global/node_modules/create-react-app/createReactApp.js:476:23)
    at getPackageName.then.then.then.packageName (/Users/PenguinSoccer/.config/yarn/global/node_modules/create-react-app/createReactApp.js:285:7)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7) code: 'MODULE_NOT_FOUND' }

Reproducible Demo

https://github.com/thomas-jeepe/err-demo/

So, just using regular logic, it seems that create-react-app is unaware about yarn workspaces, which install at the package level node_modules rather than for each individual folder in the workspace.

create-react-app goes for the folder’s node_modules when the node_modules are kept in the workspace root.

Although from my understanding, yarn attempts to link node_modules in each directory to the root workspace, so then I don’t know what the issue is.

Whether create-react-app should support yarn workspaces is up to you guys and low priority for me, since I probably won’t use it anyway (think its a cool project though 😃)

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 41
Comments: 20 (1 by maintainers)

Most upvoted comments

Hi,

I’ve had this issue last month. Luckily a fix in yarn and a blog article had already been published https://yarnpkg.com/blog/2018/02/15/nohoist/

So the quick fix on my side was to update yarn to 1.4.2 or later then to add the following in the cra app’s package.json

"workspaces": {
  "nohoist": ["react-scripts", "react-scripts/**"]
}

or in the root package.json:

"workspaces": {
  "packages": ["packages/*"],
  "nohoist": ["**/react-scripts", "**/react-scripts/**"]
}

+47

fazouane-marouane on Apr 8, 2018

@fazouane-marouane I created a small repo that has an app and library under packages. The app is trying to use a React component from the library and I put the error in the readme. Maybe it’s as simple as I’m importing Test incorrectly in App.js or have ** incorrect in the workspace package.json. Thanks for any help with this.

https://github.com/MikeSuiter/cra-yarn-workspace

MikeSuiter on May 17, 2018

Good keep it that way

On Sat, Dec 29, 2018, 3:17 AM stale[bot] <notifications@github.com wrote:

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/facebook/create-react-app/issues/3031#issuecomment-450482013, or mute the thread https://github.com/notifications/unsubscribe-auth/AqfL0txUjILN9b7QjN2aqDEf9McedtOBks5u90EhgaJpZM4PHu1N .

7399gem on Dec 30, 2018

Doesn’t the CRA module resolution algorithm look at the main key in package.json?

I have compiled my code, but can’t get CRA app to resolve from the compiled folder.

Sharavanth on May 22, 2018

@csepulv I provided a PR a few months ago to make cra work with lerna and yarn workspaces/yarn pnp. One limitation is the necessity to have a “lerna.json” file at the top and switch to using “lerna-react-scripts” instead of “react-scripts” in your monorepo. It was at first something that I did to scratch my own itch and I never got around to remove any dependency on lerna but it should work for you as well even if you don’t use it. https://github.com/facebook/create-react-app/pull/6599#issuecomment-493517971

fazouane-marouane on Jul 18, 2019

As an update for anyone checking, since I decided to debug this in a completely bare project, the nohoist configuration setting in the root package.json only seem to be needed for the initialization of an application with create-react-app. If you remove that configuration after bootstrapping your application, remove all of your node_modules folders, then run yarn install, everything will work as expected… including running the start/build scripts for your workspace.

This happened to be important for my team since we have a monorepo with an ecosystem of different smaller applications that share packages. Adding nohoist when you have multiple applications can expand your overall application size dramatically, which is a problem for us since we are doing all of our CI and build steps in Docker.

brianespinosa on Nov 27, 2018

@MikeSuiter it would be easier to advise you with a small repo to reproduce this. Taking a wild guess here: if it worked without yarn workspaces you should maybe have a "nohoist": ["react-scripts", "react-scripts/**", "wp-core", "wp-core/**"] or something similar to get it working?

fazouane-marouane on May 16, 2018

I am also experiencing this issue.

Because Yarn hoists package installs from the child workspaces into the parent package, the package.json isn’t where create-react-app thinks it should be.

A workaround for this issue is to run create-react-app in a separate directory from the one with yarn workspaces enabled, then delete <react app>/node_modules, move the react app into the parent project, and then run yarn install again.

My system info

$ uname -srvo
Linux 4.4.0-93-generic #116-Ubuntu SMP Fri Aug 11 21:17:51 UTC 2017 GNU/Linux

$ lsb_release -rcd
Description:	Ubuntu 16.04.3 LTS
Release:	16.04
Codename:	xenial

$ node --version
v8.4.0

$ npm --version
y5.4.1

$ yarn --version
1.0.1

wgoodall01 on Sep 12, 2017