Use yarn to manage dependencies

[mjackson]

Let's use yarn workspaces to manage dependencies (see #4362). This should improve install times by reducing the number of packages we need to install.

An alternative approach could be to use lerna's --hoist feature if we want to stick with the npm client. But I'm using yarn pretty much everywhere these days, so I'd like to just go with that.

Currently, I can't get the react-router-native tests to pass using yarn. It seems jest is looking for stuff in packages/react-router-native/node_modules that may not be there because yarn workspaces puts them in the root node_modules dir. At least that's my guess.

/cc @rogeliog who submitted #5502 that uses jest's "projects" feature for testing. I wonder if that would help here...

[timdorr]

I'm curious to see how this impacts build times. Less deps are good, but we're already at 7s of install time, so we're pretty close to optimal: https://travis-ci.org/ReactTraining/react-router/builds/274603368

To be clear, I'm totally on board with using yarn workspaces, but let's not make perf a huge motivating factor. Features are more important, as long as the tradeoff isn't some huge regression (which we'll see the impact of after Travis builds up a cache).

Since the website is now at the top level, can we stop building it during CI? It doesn't have any tests, so it's kind of a wasted effort. We could exclude it from the workspace, since it's its own separate thing anyways. That'll cut down a YUGE number of deps as well.

[mjackson]

Since the website is now at the top level, can we stop building it during CI?

Yes, absolutely. Let's do something in a separate PR.

[timdorr]

Can you do that here? I believe you just need to remove it from the workspaces line and give the directory it's own yarn.lock file. Since we're already messing with CI, this seems like a good place to consider that 😄

[mjackson]

Nah, I've been messing with yarn workspaces + jest + react native for the past 24 hours and I feel like I'm getting so close but no cigar yet. I'd rather just remove the website from the build on current master and then rebase this work.

[ryanflorence]

The website uses the current react router code on master, its a great way to gut-check changes in addition to the automated tests. How will that work if it's not in the "workspaces"?

[timdorr]

The website uses the current react router code on master, its a great way to gut-check changes in addition to the automated tests.

I'm not sure I understand. It only runs the webpack build. There is no further testing or usage of the build artifacts. It's a wasted effort as far as I can tell.

[mjackson]

Would you two mind discussing in #5529? I'd like to keep the conversation focused on moving to yarn in this PR. 😅 Thanks!

[timdorr]

Re: #5502

I think you can add jest to the top-level package and try changing the test command to jest --projects packages/**/package.json to both use that feature of Jest and fix RRN testing. I would do it myself, but I don't have my open source stuff checked out on this computer and it may take me a while...

[mjackson]

Thanks, for the suggestion @timdorr. I tried that and got a slew of other errors, mainly because jest couldn't find stuff 😓

I'd be happy if you or @pshrmn could take a swing at it. This PR should get you most of the way there.

[mjackson]

For completeness, here's what I get after a fresh yarn and yarn build when I go into the packages/react-router-native directory and run jest:

michael:~/Projects/react-router/packages/react-router-native$ jest
 FAIL  __tests__/index.ios.js
  ● Test suite failed to run

    /Users/michael/Projects/react-router/node_modules/react-router-native/main.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export * from 'react-router'
                                                                                             ^^^^^^
    
    SyntaxError: Unexpected token export
      
      at ScriptTransformer._transformAndBuildScript (../../node_modules/jest-runtime/build/ScriptTransformer.js:289:17)
      at Object.<anonymous> (examples/BasicExample.js:3:24)
      at Object.<anonymous> (index.ios.js:3:19)

 PASS  __tests__/Link-test.js
 PASS  __tests__/index.android.js

Test Suites: 1 failed, 2 passed, 3 total
Tests:       5 passed, 5 total
Snapshots:   0 total
Time:        1.642s, estimated 4s
Ran all test suites.

Would love it if someone who knows more about jest wouldn't mind taking a look.

[mjackson]

I should also note that I've tried adding transform-export-extensions to packages/react-router-native/.babelrc but with no luck.

It may be helpful to look through jest's react-native example to get a handle on how jest is usually configured for RN apps.

/cc @cpojer Is it obvious to you what I'm doing wrong here?

[pshrmn]

From this jestjs/jest#2488 (comment), I added the following to my packages/react-router-native/package.json and got the tests to work.

"jest": {
  "preset": "react-native",
  "transformIgnorePatterns": [
    "node_modules/?!(react-native|native-base)"
  ]
}

I'm not sure why that fix is necessary, since as far as I know the react-router-native tests were running fine before 🤷‍♀️.

[pshrmn]

Could react-native be in the root node_modules on the Travis build? It is installed in packages/react-router-native/node_modules locally, but it is also in the root yarn.lock and I'm not sure if that forces it to be installed in the root node_modules.

[cpojer]

Hm, I don't know what's going on here. I would assume that merging the react-native preset is causing trouble. Since Jest now supports JS files as config, I would probably suggest trying to not use the preset field but rather require('react-native/jest-preset') in a JS file and then return a proper config object for Jest from that. That way you can swap out config options that don't work with your setup in this repo. Hope this unblocks you!

[pshrmn]

I took advantage of the jest.config.js file to test my theory from above and it appears to be correct.

react-router-native: setupFiles not found here
react-router-native: found setupFiles in root

I don't know why this is happening. I did a fresh clone of the repo just to verify that locally react-native is in packages/react-router-native/node_modules and it is.

[mjackson]

Thanks for doing the digging, @pshrmn. I really, really appreciate it 😅

And thanks for your comments, @cpojer. I think you nailed it. I'm going to experiment with a custom jest config for react-router-native that is able to correctly resolve the <rootDir> regardless of whether react-native ends up installed in packages/react-router-native/node_modules or the root node_modules, since it seems yarn workspaces are using a different location in CI than they do locally.

[mjackson]

Well, I tried using a custom jest config with no luck. But then I backed up and tried just running the react-router-native app and the react-native packager had problems finding the dependencies it needed as well, so I realized this isn't just an issue with jest + yarn workspaces, it's a RN issue as well!

Issues like this are probably why yarn workspaces are still considered experimental. Hoisting all the deps into a common node_modules dir is bound to break some stuff in the ecosystem. I guess we'll just hold off on adopting yarn workspaces for now, but I'll leave the branch up because eventually I'd like to be able to use it.