Create-react-app: Support Yarn

Created on 11 Oct 2016 · 30Comments · Source: facebook/create-react-app

We released Yarn, a faster alternative to the npm client. Can create-react-app detect when yarn is installed (or install yarn?) for faster app creation?

up for grabs!

Source

cpojer

👍49

Most helpful comment

I'm going to work on this.

fson on 11 Oct 2016

👍21

All 30 comments

Yep. If somebody wants to implement this please comment in this issue so we don't duplicate effort.

gaearon on 11 Oct 2016

(Let's not install yarn, but let's detect it.)

gaearon on 11 Oct 2016

👍19

I'm going to work on this.

fson on 11 Oct 2016

👍21

I just did some quick testing with yarn and create-react-app, and found a problem:

$ create-react-app rhubarb
Creating a new React app in /Users/pete/Desktop/rhubarb.

Installing packages. This might take a couple minutes.
Installing react-scripts from npm...

...

Success! Created rhubarb at /Users/pete/Desktop/rhubarb
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd rhubarb
  npm start

Happy hacking!

$ cd rhubarb

$ rm -rf node_modules

$ yarn
yarn install v0.15.1
info No lockfile found.
[1/4] 🔍  Resolving packages...
warning react-scripts > jest > jest-cli > istanbul-api > fileset > [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 📃  Building fresh packages...
success Saved lockfile.
✨  Done in 19.01s.

$ yarn start
yarn start v0.15.1
$ "react-scripts start"
sh: react-scripts start: command not found
error Command failed with exit code 127.
info Visit http://yarnpkg.com/en/docs/cli/start for documentation about this command.

Manually running ./node_modules/react-scripts/bin/react-scripts.js start works just fine.

Yarn does seem to set things up correctly:

$ ls node_modules/.bin
react-scripts

$ ./node_modules/.bin/react-scripts start
Starting the development server...

I added "env": "env" to my scripts in package.json to try to see what was going on with the path:

$ yarn run env
yarn run v0.15.1
$ "env"
...
PATH=/Users/pete/Desktop/rhubarb/node_modules/.bin:...
...

That looks legit to me, so I'm not sure why everything is failing. Smells like either a yarn problem, or something strange in my environment. Either way, I thought it was worth documenting here for folks looking into yarn and create-react-app interactions.

notahat on 12 Oct 2016

@notahat For me that works without problems and yarn start starts the development server. I wonder if the problem is somehow specific to your environment (I'm using Node v6.7.0 on macOS).

fson on 12 Oct 2016

@fson Interesting. I'm on Node 4. I'll keep digging and see what I find.

notahat on 12 Oct 2016

I can confirm I'm seeing the same exact error, and I did the same exact thing as @notahat (down to the rhubarb 😁 ). But I'm on Node v6.7.0 + macOS 10.12 too.

I tried the other variations like yarn run start and yarn run build and all throw the same command not found errors. Can confirm that npm start and the rest of the gang still work.

rdmurphy on 12 Oct 2016

Yep, I just tested on 6.7.0 and had the same problem. Also MacOS 10.12.

notahat on 12 Oct 2016

Ok, I tried with a fresh Node installation on another laptop and was able to reproduce the issue with the same commands as @notahat. I'll dig deeper in the morning, unless someone finds out why it doesn't work before then.

fson on 12 Oct 2016

Note you'll need to update the create react app global cli to use yarn instead of npm if available, otherwise cra will keep shelling out to npm and the install time will be slow.

cpojer on 12 Oct 2016

I can see what's going on, although I'm not sure why yet.

I added this to my scripts: "abracadabra": "react-scripts"

$ yarn run abracadabra
yarn run v0.15.1
$ "react-scripts"
Unknown script "undefined".
Perhaps you need to update react-scripts?
✨  Done in 1.38s.

So that works!

So with yarn start, yarn is trying to use react-scripts start as the command name, rather than react-scripts as the command name, and start as an argument.

notahat on 12 Oct 2016

Please file an issue in Yarn?

gaearon on 12 Oct 2016

👍2

@cpojer Yup, my plan is to check if the yarn command is available and if it is, use that to install the dependencies. We might be even able to check this by just trying to run it and falling back to npm if that fails.

On Wed, 12 Oct 2016 at 02:36 Christoph Pojer

<
mailto:Christoph Pojer [email protected]

wrote:

a, pre, code, a:link, body { word-wrap: break-word !important; }

Note you'll need to update the create react app global cli to use yarn instead of npm if available, otherwise cra will keep shelling out to npm and the install time will be slow.

—

You are receiving this because you were mentioned.

Reply to this email directly,
https://github.com/facebookincubator/create-react-app/issues/896#issuecomment-253078165
, or
https://github.com/notifications/unsubscribe-auth/AAeWPlGEjzWnA4nuGS9BLdKkktGq_bayks5qzB2agaJpZM4KT29X
.

fson on 12 Oct 2016

This is great.
I also add support for our getstorybook tool to use yarn.
Here's how we do it:

Use install getstorybook globally using yarn:

yarn global add getstorybook

Then after that getstorybook uses yarn to install deps.
This is how we detect yarn. It's not elegant, but it's working pretty well.

arunoda on 12 Oct 2016

👍2

@notahat Why are you running "react-scripts start" as a single command and not as react-scripts start as 1 command and 1 argument ?

Your shell complains about:

sh: react-scripts start: command not found

and not

sh: react-scripts: command not found

Seems the error is on your side.

cerisier on 12 Oct 2016

Looks like this got fixed with yarnpkg/yarn#809

ben174 on 12 Oct 2016

🎉1

as per today @ben174 it was merged to [email protected] release but I was still having the issue. Then I went to https://github.com/yarnpkg/yarn/pull/809 comments and found that the issue is onlt for those installing yarn via npm install -g yarn, I used the curl command and it works fine. Seems like yarn team is working on it for version 0.15.2. So, confirmed this is not an issue of create-react-app or react-scripts. ;)

jcperez-ch on 17 Oct 2016

Not sure if this is the appropriate place, or whether I should create a separate issue, but running tests (via npm t) does not work after installing packages with yarn.

I got the following error:

Determining test suites to run...2016-10-19 16:10 node[43650] (FSEvents.framework) FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-22)
2016-10-19 16:10 node[43650] (FSEvents.framework) FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-22)
2016-10-19 16:10 node[43650] (FSEvents.framework) FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-22)
events.js:160
      throw er; // Unhandled 'error' event
      ^

Error: Error watching file for changes: EMFILE
    at exports._errnoException (util.js:1026:11)
    at FSEvent.FSWatcher._handle.onchange (fs.js:1406:11)
npm ERR! Test failed.  See above for more details.

Setup:

Node v6.9.0
yarn v0.16.0
macOS Sierra v10.12

devillexio on 19 Oct 2016

👍5 😕2

A simple bash detection script might be the easiest solution:

if which yarn > /dev/null; then
  yarn
else
  npm install
fi

ShMcK on 19 Oct 2016

@ShMcK it should work on Windows too.

fhelwanger on 19 Oct 2016

I assumed bash might do, looking at the tasks directory, but now I see that's just for build, release and testing.

You're right. Though I would assume there is an equally simple if/then detection script for windows.

ShMcK on 19 Oct 2016

I implemented the detection by simply trying to start yarn and checking if that fails with ENOENT, in which case npm will be used (see https://github.com/facebookincubator/create-react-app/pull/898). This will also work on Windows because we use cross-spawn to spawn the process.

fson on 19 Oct 2016

👍2

Just wanted to confirm that homebrew now has yarn v0.16.0, which I wasn't able to do as of yesterday

So, I was able to run brew upgrade yarn and the following issue faced by @notahat, @cerisier, and myself (and likely others) was resolved:

$ yarn start
yarn start v0.15.1
$ "react-scripts start"
sh: react-scripts start: command not found
error Command failed with exit code 127.
info Visit http://yarnpkg.com/en/docs/cli/start for documentation about this command.

Seems like it was fixed by this PR: https://github.com/yarnpkg/yarn/pull/809

abhishekpillai on 19 Oct 2016

Yep, can confirm that it's solved in 0.16.0 for me.

notahat on 20 Oct 2016

What is the status of fsevents install? Does it get optionally installed as we need on OS X?

gaearon on 28 Oct 2016

Fixed by #898.

gaearon on 20 Nov 2016

😄2

create-react-app does not detect yarn on my system and exits with the npm not found error.

Is this possibly something to do with the mac ports install location at /opt/local/bin?

yarn version 0.22.0
create-react-app version 1.3.0

songololo on 15 Apr 2017

@shongololo could you give the full error message you get from create-react-app and the output of following commands on your system:

which yarn
which yarnpkg
yarnpkg --version

fson on 15 Apr 2017

@fson this is the error message:

Installing packages. This might take a couple minutes.
Installing react, react-dom, and react-scripts...

/bin/sh: npm: command not found
events.js:160
      throw er; // Unhandled 'error' event
      ^

Error: spawn npm ENOENT
    at exports._errnoException (util.js:1018:11)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:193:32)
    at onErrorNT (internal/child_process.js:367:16)
    at _combinedTickCallback (internal/process/next_tick.js:80:11)
    at process._tickCallback (internal/process/next_tick.js:104:9)
    at Module.runMain (module.js:606:11)
    at run (bootstrap_node.js:393:7)
    at startup (bootstrap_node.js:150:9)
    at bootstrap_node.js:508:3

for the versions:

which yarn
/opt/local/bin/yarn

whereas which yarnpkg and yarnpkg --version are not found.

songololo on 15 Apr 2017

Even if you have Yarn I'd still recommend installing npm. As I understand the program crashes when it falls back to npm. Many other programs will assume npm exists.

In your particular case please create a symbolic link from yarnpkg to yarn, and CRA then will pick it up. It comes in the default distribution so you should file an issue (with yarn or whatever distributed yarn on your system) about a missing yarnpkg alias.

gaearon on 15 Apr 2017

👍1

Was this page helpful?

0 / 5 - 0 ratings