Fluentui: npm/yarn/pnpm install office-ui-fabric-react often gets stuck

[ethanroday]

Environment information

OS: Windows 10 Enterprise (17763)
Node version: 8.12.0
npm version: 6.4.1
Yarn version: 1.12.3
pnpm version: 2.24.2

Steps to reproduce

With clean caches,

npm install --save office-ui-fabric-react

Or

yarn add office-ui-fabric-react

Or

pnpm install --save office-ui-fabric-react

Expected behavior

The package should install.

Actual behavior

The package installs, but it hangs for quite a while - often up to 2 minutes - during installation. At first I thought it was an issue with the dependencies, so I first installed them all with the following command (same with Yarn and pnpm):

npm install --save @microsoft/load-themed-styles@"^1.7.13" @uifabric/icons@">=6.3.0 <7.0.0" @uifabric/merge-styles@">=6.15.0 <7.0.0" @uifabric/set-version@">=1.1.3 <2.0.0" @uifabric/styling@">=6.39.0 <7.0.0" @uifabric/utilities@">=6.27.1 <7.0.0" prop-types@"^15.5.10" tslib@"^1.7.1"

However, installation still hung for quite some time. For npm:

For Yarn:

For pnpm:

[Vitalius1]

@kenotron Is this a normal behavior for when installing OUFR package?

[kenotron]

So, if this is installing OUFR straight from npmjs.org, the problem is likely how big our package is (7mb range). I would love to see more info about how long it takes to actually just DOWNLOAD vs INSTALL the package.

Say, where does it "hang for while" ? Are there other similarly large package you could try ( maybe try npm installing material-ui, or something?)

[ethanroday]

When I use pnpm, the download does appear to take a while. I don't think it's because of my connection, though - I have ~10Mbps down. Installing material-ui with pnpm takes about 25 seconds for me. Yarn and npm are also about the same. This makes me think it might not just be a download size issue.

As to your question of where exactly it hangs, npm seems to do it during the extract phase. Here's the verbose output:

For Yarn, it hangs when fetching packages (and it always seems to be the last one):

Yarn in particular hangs for a really long time - generally around three minutes.

For pnpm it doesn't hang per se, but just appears to download _really_ slowly. The download progress moves in increments of 300KB or so every several seconds. It starts pretty reliably at 2.7MB:

[Vitalius1]

@kenotron is there anything actionable that can be done from the info provided above? It seems to me there needs to be done in-depth testing to actually know if it's an OUFR issue. The logs above are not pointing to any specific cause.

P.S. @ethanroday, for testing purposes I did try to create a blank project and ran npm install --save office-ui-fabric-react and it took me like 25 seconds at most... but that's on MS network, which is 100+Mbps. Did you try installing in a different environment, perhaps a different internet connection or dev machine?

[ethanroday]

@Vitalius1 I'm on MS network as well 😄
Just tried on my home computer and have no repro there (it hangs a little, but it's possibly just the download), so maybe something wrong with my machine. Then again, I made sure all relevant caches (npm/Yarn/pnpm) were clear before testing.

[Vitalius1]

If you can pinpoint the issue as being some weird setup on your work machine than feel free to close the issue. I've also forwarded you an email that I think might be the issue if you are seeing it on a Windows machine.

[ethanroday]

@Vitalius1 I tried your indexing fix but no luck, unfortunately.
Given the lack of a consistent repro I'll close this. If I ever figure out what it is, I'll comment here.

[johnholliday]

I'm seeing it fail completely with yarn.

yarn add office-ui-fabric-react
yarn add v1.13.0
[1/4] Resolving packages...
[2/4] Fetching packages...
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
error An unexpected error occurred: "https://registry.yarnpkg.com/office-ui-fabric-react/-/office-ui-fabric-react-6.132.0.tgz: ESOCKETTIMEDOUT".

Detail from Error Log:

Yarn version:
1.13.0

Node version:
11.4.0

Platform:
win32 x64

Trace:
Error: https://registry.yarnpkg.com/office-ui-fabric-react/-/office-ui-fabric-react-6.132.0.tgz: ESOCKETTIMEDOUT
at ClientRequest. (C:\Users\John\AppData\Roaming\npm\node_modules\yarn\lib\cli.js:130024:19)
at Object.onceWrapper (events.js:277:13)
at ClientRequest.emit (events.js:189:13)
at TLSSocket.emitRequestTimeout (_http_client.js:668:40)
at Object.onceWrapper (events.js:277:13)
at TLSSocket.emit (events.js:189:13)
at TLSSocket.Socket._onTimeout (net.js:449:8)
at listOnTimeout (timers.js:324:15)
at processTimers (timers.js:268:5)

[kharenzze]

Try yarn add office-ui-fabric-react --network-timeout 1000000000