npm start performance issue > 5 minutes

[DiegoMcDipster]

Hi,

I just:

1. created a new app via: npx create-react-app my-app.
2. made no changes to the code
3. ran: npm start

This takes over 5 minutes to return 'Compiled Successfully'.
localhost:3000 shows the default page. So, that seems to be working fine... it just takes an age to get to it.
Console has the first line : [HMR] Waiting for update signal from WDS...

I am running WSL2.
Ubuntu 18.04.4
Windows 10 Home Insider Preview.
Build 20161.rs_prerelease.200627-1754.

Also note (I'm not sure if this is relevant) I have been able to successfully run nodejs applications without any problems. But they used the command "npm run ..." & nodemon.

Your help would really be appreciated! I just started a tutorial and it's impossible to follow it with this performing so badly.

Regards!

[DiegoMcDipster]

An update on this as i've been trying different things out.
I tried the react boilerplate found here: https://github.com/react-boilerplate/react-boilerplate

once that's installed, i run npm start and the server starts within 10 seconds.

What this tells me is that:

1. the issue is not with my hardware.
2. the issue is not with WSL2.
3. the issue is not with npm.

Hope this helps!

PS. unfortunately I can't use the boilerplate as the file/directory structure is completely different from the tutorial that i'm following. So... you're help would really be appreciated.
pps. if you need logs, please advise me on how to produce them and i will provide.

[HemanthDavuluri]

I always delete the default created js files and create my own . Its works fine and yes it would be easy to clarify this if you let us know hoe to produce the error again.

[DiegoMcDipster]

@HemanthDavuluri , thanks for taking the time to reply! I really appreciate it.

Which default js files do you mean? I've already tried removing all files from the src folder and running with an extremely simple index.js that does a console.log('test');
The server still took approx 5 minutes to start

To re-create it i do the steps:

1. create a new app via: npx create-react-app my-app.
2. run: npm start

I'm a complete novice at react and nodejs. So, can you advise on how i can monitor the npm start, so that i can see which process it is that is taking ages to start up? For example is there any way of seeing something like
process 1 - 200 ms
process 2 - 240 seconds
process 3 - 1 ms
....

[HemanthDavuluri]

Yes even i delete the complete src folder and recreate it . i dont know what is the problem that is leading more build time on your machine!

[DiegoMcDipster]

Just to keep you guys in the loop. It turns out this was a WSL2 issue. For details on how to resolve check out : https://docs.microsoft.com/en-us/windows/wsl/compare-versions#use-the-linux-file-system-for-faster-performance

This one simple change solved the problem and it's running faster than Lightening McQueen!

[vsolisdevelop]

Thanks a lot!!!

[iam-hbk]

Hi, as for me, I don't use WSL, I have ubuntu directly installed on my computer and npm takes too long to start, anybody who knows what could be the issue ? my hardware is quite reliable (16Gb ram, i5 6th gen CPU)

[IIT-Bhupendra]

Just to keep you guys in the loop. It turns out this was a WSL2 issue. For details on how to resolve check out : https://docs.microsoft.com/en-us/windows/wsl/compare-versions#use-the-linux-file-system-for-faster-performance

This one simple change solved the problem and it's running faster than Lightening McQueen!

Can you please bring more details here about this one simple change?

[DiegoMcDipster]

@IIT-Bhupendra: Here's the issue I logged with WSL #5705

If that doesn't answer your question, can you be specific please?

[IIT-Bhupendra]

@DiegoMcDipster: Actually, I was having a similar issue that you have mentioned in #5705, i.e., npm start takes 2-5 minutes to load a simple react app.
Therefore, I had gone through different articles, posts, queries, etc. But I concluded that yarn is faster than npm due to its caching properties. So, I just installed yarn, checked it, and then I uninstalled the yarn, and now my npm start is also working very fine 😁😄. Now, It takes hardly a second to load the application.

[DiegoMcDipster]

@IIT-Bhupendra, Good to hear! Happy hacking!

[msmriyaz]

For better performance avoid developing react artifacts within /mnt/ path as they access the windows path via a proxy, this makes the npm start awfully very slow. move your project under /home path of your WSL2 instance (this is a path internal to VM) and run the npm start from there mine started at a blasting speed -
webpack 5.69.1 compiled successfully in 581 ms

My project path now is - ~/dev/react/ReactProjects/my-app

[dcorns]

I had this issue where the bare bones app created by create-react-app was taking 2 minutes to finish when running start. I tracked the issue down to the openBrowser function. You can eliminate this function from startup either by ejecting and then editing the start script or by modifying the start text in package.json to "BROWSER=none react-scripts start". Then you will need to open the browser manually, but many people prefer that start does not open the browser window when it runs anyway which is why I think BROWSER=none exists as a parameter.