Can't use a CRA project inside Yarn Workspaces

[thomas-jeepe]

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

1. node -v: 8.4.0
2. npm -v: 4.6.1
3. yarn --version: 0.27.5
4. npm ls react-scripts: Empty (no scripts to use)

Then, specify:

1. Operating system: OSX El Capitan 10.11.6

Steps to Reproduce

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

1. mkdir err-demo
2. cd err-demo
3. touch .yarnrc
4. echo "workspaces-experimental true" > .yarnrc
5. touch package.json
6. 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 :))

[wgoodall01]

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

[rulonder]

I am experiencing the same problem, But might it be a yarn workspaces problem? In other words, is there any way that create-react-app can know where the applicable node_modules directory is located without making the guess that is in the package folder?

[ghost]

I think this is not Yarn fault, it's because of tools which search for node_modules by themself to show you a error, some info or other stuff and it doesn't go in upper level, that's why. Because Yarn with workspaces install almost all node_modules in project dir, not the workspace dir. Try to use it without create-react-app but for e.g. with simple project (express or smth) you will see it works :)

[rulonder]

@bsvipas That's right, create-react-app was using an absolute path, I manage to fix it using a relative one. I just submitted a pull request.
#3176

[rulonder]

Nah, that only works with the local npm installation.

[fazouane-marouane]

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/**"]
}

[MikeSuiter]

@fazouane-marouane I've read that Yarn nohoist article and have a simple test workspace and can't get it to work. My CRA app is in packages/wp-app and I have a simple React component in packages/wp-core/src/Test.js. In my wp-app/node_modules there is a link to wp-core. I've tried all kinds of variations of import and get this error:

Module not found: Can't resolve 'wp-core/Test' in 'D:\Workspaces\React\workspace\packages\wp-app\src'.

It should be looking in packages/wp-core/src instead.

Do you have a CRA in one package that is using code in another package? If so any tips on how to get it to see it properly?

[fazouane-marouane]

@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?

[MikeSuiter]

@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

[fazouane-marouane]

@MikeSuiter thanks for the test project, I’ll try it once I get access to my computer. Can you try building your components in xyz-library first with babel then import xyz-library/Dist/Test ?

[MikeSuiter]

@fazouane-marouane I'm not sure how the library package should be implemented but looking at your comment I added babel and NPM config but still no luck. I pushed the changes but will leave it alone until you get a change to look at it. Thx!

And sorry for hijacking this issue - if our conversation should be taken offline let me know.

[Sharavanth]

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.

[bugzpodder]

@MikeSuiter you'll need to install the latest version of react-scripts per #3815
Also to resolve the imported library you'll need to do this:
-import { Test } from 'xyz-library';
+import { Test } from 'xyz-library/src';

@Sharavanth I don't believe so. If you import from a workspace you'll have to specify the full path under that.

[skyl]

nohoist seems to be working: expo/create-react-native-app#340 (comment)

[Edit after googling my way back to my own comment]

nohoist seems to work for the react scripts but the packager is still having trouble finding dependencies from the other packages and dependencies of those dependencies ...

[brianespinosa]

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.

[stale]

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.

[7399gem]

Good keep it that way

…

On Sat, Dec 29, 2018, 3:17 AM stale[bot] ***@***.*** 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 <#3031 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AqfL0txUjILN9b7QjN2aqDEf9McedtOBks5u90EhgaJpZM4PHu1N> .

[csepulv]

I've found numerous articles and GitHub issues on the yarn/workspace setup (or a lerna setup). They allow you to include the shared module, as described here, but they don't seem to address the transpiling of the shared source/components.

I found this article https://medium.com/capriza-engineering/sharing-source-code-and-libraries-in-react-bd30926df312 which uses react-app-rewired and customize-cra to get the live transpiling working.

As a note, with yarn workspaces, you'll need to specify a node_modules directory at the project root, in config-overrides.js (described in linked article). Something like:

path.resolve('../node_modules/shared-lib/src')

I note this in case it helps someone (until FB provides a CRA that provides a direct solution 😀)

[fazouane-marouane]

@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.
#6599 (comment)

[mrmckeb]

You can use CRA inside of a workspace, but CRA will expect other packages in the workspace to be built - just as they would if they were published to npm.