Repository navigation
Can't use a CRA project inside Yarn Workspaces #3031
Description
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.0npm -v: 4.6.1yarn --version: 0.27.5npm 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-democd err-demotouch .yarnrcecho "workspaces-experimental true" > .yarnrctouch 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 :))
Activity
wgoodall01 commentedon Sep 12, 2017
I am also experiencing this issue.
Because Yarn hoists package installs from the child workspaces into the parent package, the
package.jsonisn't wherecreate-react-appthinks 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 runyarn installagain.My system info
rulonder commentedon Sep 22, 2017
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?
rulonder commentedon Sep 22, 2017
@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 commentedon Sep 22, 2017
Nah, that only works with the local npm installation.
[-]Workspace machine broke[/-][+]Can't use a CRA project inside Yarn Workspaces[/+]fazouane-marouane commentedon Apr 8, 2018
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
or in the root package.json:
MikeSuiter commentedon May 16, 2018
@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 commentedon May 16, 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?MikeSuiter commentedon May 17, 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
fazouane-marouane commentedon May 17, 2018
@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 commentedon May 17, 2018
@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 commentedon May 22, 2018
Doesn't the CRA module resolution algorithm look at the
mainkey inpackage.json?I have compiled my code, but can't get CRA app to resolve from the compiled folder.
bugzpodder commentedon Jun 5, 2018
@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 commentedon Jun 21, 2018
nohoistseems 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 commentedon Nov 27, 2018
As an update for anyone checking, since I decided to debug this in a completely bare project, the
nohoistconfiguration setting in the root package.json only seem to be needed for the initialization of an application withcreate-react-app. If you remove that configuration after bootstrapping your application, remove all of yournode_modulesfolders, then runyarn 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 commentedon Dec 29, 2018
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 commentedon Dec 30, 2018
csepulv commentedon Jul 18, 2019
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-rewiredandcustomize-crato get the live transpiling working.As a note, with yarn workspaces, you'll need to specify a
node_modulesdirectory at the project root, inconfig-overrides.js(described in linked article). Something like:I note this in case it helps someone (until FB provides a CRA that provides a direct solution 😀)
fazouane-marouane commentedon Jul 18, 2019
@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 commentedon Jun 16, 2021
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.