`yarn start` and `yarn build` Failing on Fresh Clone

[trudeaua21]

Bug description

On a fresh clone of the repository, I ran into a couple of different failures:

1. yarn ran into a timeout issue, which I was able to work around by passing a higher network timeout flag to yarn install.
2. yarn start failed, resulting in the built app crashing instead of running successfully.
3. yarn build failed as well.

Steps to reproduce

For reference, here's some key system information:
Node Version: v16.20.0 (recommended version is v16.X)
Yarn Version: 1.22.19 (recommended version is v1.22.4+)
Operating System & Version: Windows 10 Home Version 10.0.19045 Build 19045

First, I forked the repo.

Specific reproduction steps after that are a little tricky, as I've tried re-cloning the project a couple of times to get around the errors. Here's what happened on one of my first two clones:

1. On main branch, I ran yarn, which failed due to network timeout.
2. I then ran yarn install --network-timeout 1000000000, which successfully went through.
3. After that I encountered errors with yarn start and yarn build (don't have logs from these runs, but they were pretty much the same as can be seen below).

After that, I decided to re-clone to capture the logs for reproduction. Here's what happened on that clone:

1. Created a new branch off of main called package-testing-documentation
2. Ran yarn in repository root, which didn't experience the network timeout issue, and gave the following output:

$ yarn
yarn install v1.22.19
[1/5] Validating package.json...
[2/5] Resolving packages...
[3/5] Fetching packages...
[4/5] Linking dependencies...
warning "react-spinners > @emotion/react > @emotion/babel-plugin > @babel/plugin-syntax-jsx@7.16.7" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@docusaurus/preset-classic > @docusaurus/theme-search-algolia > @docsearch/react@3.0.0" has unmet peer dependency "@types/react@>= 16.8.0 < 18.0.0".
warning "react-instantsearch-dom > algoliasearch-helper@3.8.2" has unmet peer dependency "algoliasearch@>= 3.1 < 5".
warning "@docusaurus/preset-classic > @docusaurus/theme-search-algolia > @docsearch/react > @algolia/autocomplete-preset-algolia@1.5.2" has unmet peer dependency "@algolia/client-search@^4.9.1".
warning " > docusaurus-plugin-sass@0.2.2" has incorrect peer dependency "@docusaurus/core@^2.0.0-beta".
warning "docusaurus-plugin-sass > sass-loader@10.2.1" has unmet peer dependency "webpack@^4.36.0 || ^5.0.0".
warning "react-hot-toast > goober@2.1.9" has unmet peer dependency "csstype@^3.0.10".
warning " > react-instantsearch-dom@6.24.0" has unmet peer dependency "algoliasearch@>= 3.1 < 5".
warning "react-instantsearch-dom > react-instantsearch-core@6.24.0" has unmet peer dependency "algoliasearch@>= 3.1 < 5".
warning "react-spinners > @emotion/react > @emotion/babel-plugin@11.9.2" has unmet peer dependency "@babel/core@^7.0.0".
warning "react-spring > @react-spring/konva@9.4.5" has unmet peer dependency "konva@>=2.6".
warning "react-spring > @react-spring/konva@9.4.5" has unmet peer dependency "react-konva@^16.8.0  || ^17.0.0".
warning "react-spring > @react-spring/native@9.4.5" has unmet peer dependency "react-native@>=0.58".
warning "react-spring > @react-spring/three@9.4.5" has unmet peer dependency "@react-three/fiber@>=6.0".
warning "react-spring > @react-spring/three@9.4.5" has unmet peer dependency "three@>=0.126".
warning "react-spring > @react-spring/zdog@9.4.5" has unmet peer dependency "react-zdog@>=1.0".
warning "react-spring > @react-spring/zdog@9.4.5" has unmet peer dependency "zdog@>=1.0".
warning " > @testing-library/react@13.2.0" has incorrect peer dependency "react@^18.0.0".
warning " > @testing-library/react@13.2.0" has incorrect peer dependency "react-dom@^18.0.0".
[5/5] Building fresh packages...
$ lefthook install && npx husky uninstall -y
Done in 128.19s.

3. Ran yarn start in repository root, which gave the following output (uploaded in file form to due GitHub Issue body length limit):

YarnStartOutput.txt

Additionally, the browser shows the following error:

This page crashed.

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

6. Ran yarn build in repository root, which gave the following output (uploaded in file form to due GitHub Issue body length limit):

YarnBuildOutput.txt

I haven't really tried to solve it past the re-cloning and checking that my node and yarn version match what's in CONTRIBUTING.md.

Expected behavior

Expected behavior would be a fresh clone of the project installing/starting/building without error without any additional setup past what's already documented.

Additional details
N/A

[webbertakken]

I've created a fresh clone both on MacOS, zsh, volta as well as on Windows 11, Powershell latest, Volta. Both times yarn ran fine to install and yarn dev also ran fine to run the dev server.

We also test integrity of the repository in CI.

Therefor I believe this might be an issue with your local system or network. Could you try checking if you're not behind a VPN or reinstall node/volta?

[trudeaua21]

You're right, definitely seems like an issue with my machine specifically. I'll try reinstalling the version of node I'm using and doing some more googling to try to figure out the problem sometime in the next couple days 👍

[trudeaua21]

Looks like my usage of Git Bash was the issue - switched over to Powershell and it built and ran properly! Thanks for triaging 🙌

Leaving this open only because I'm not sure whether you'd want to update the project to support Git Bash/document that it's not supported. My problem has been solved, so feel free to close if you'd like.