Can't use a CRA project inside Yarn Workspaces
thomas-jeepe opened this issue · 20 comments
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 :))
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
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?
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 :)
@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
Nah, that only works with the local npm installation.
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/**"]
}@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?
@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 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.
@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 ?
@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.
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.
@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.
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 ...
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.
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.
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 😀)
@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)
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.