Slow compile in medium sized project after upgrading create-react-app to 4.0

[houmark]

Hey there,

Today create-react-app 4.0 was released and I was pretty excited to try outer fast refresh with our existing app.

Our app was started with create-react-app 3.x and we used the onepass package for linting etc. We had stayed on 1.6.0 up until now, but to try to get everything up to date and get the newest features, I uninstalled the old packages (according to the guide here) and deleted node_modules, then went on to install latest react-scripts (non ejected) and this package as recommended. Tweak config back and forward, rules, etc.

No matter what I did, npm start is around 20 seconds and any change inside a file will start to compile but it's about 10 seconds until the fast refresh happens.

I then went on to remove this package to try to run create-react-app / react-scripts in the most simple form and it seems to be normally fast, so re-compiling happens within 1-2 seconds and start-up is ~10 seconds.

So the purpose of this bug report is to see if anyone else hits the same problem and/or has solved it in any way. It may be something unique to our setup or a configuration, but it's really really hard to debug this as there's not really any way to see what's happening behind the scenes and what's slowing compile down — at least to my knowledge.

I have now rolled back to the old onepass 1.6.0 and 3.4.4 of react-scripts, and have okay fast compile like before, but I am willing to debug and attempt other things if anyone has any suggestions as to what could be the reason for our slowdowns.

[abhijithvijayan]

Hello there, the onepass package is deprecated but the new package is bit of more customizable than the old one and presumably there wont be much of changes to the linting rules.

The new package is used widely with nextjs based projects, create-react-app(v3) projects, react-native, node & express projects, and even comes with TypeScript support.

I havent had any issues so far.

I will check it out myself for CRA v4 and I presume CRA v4 uses Eslint v7.x.x by default.

[abhijithvijayan]

You can check the debug console for any eslint server related issues.

[houmark]

Correct, I have no problem tweaking rules accordingly, that's expected as long as the base package is somewhat reasonable to what I'd expect, which seems to be the case — so no problem there.

Since 2.5.6 of this package seems to require or use eslint 7.x, when I tried running 2.5.6 with CRA 3.x I got an error, so that was a no go. I may have missed a step there and maybe I would be able to run an older eslint version without issues, but to be frank, all the peer-installations can make it quite hard to understand which combo works. I had already spent a good amount of hours today trying to make it all work on CRA 4.x, so I decided to roll back and wait and see if others would have problems with slow compile on CRA 4.x or if this package would have such issues and thus get tweaked accordingly. In the end CRA 4.x was released today, so waiting a week or 4 may be better for me to have a chance of success.

If you'd like to test a project with CRA 4.x and this package, I'd appreciate your feedback, but please bear in mind that a small project with little to no code in it, may not show any significant issues in compile time.

[houmark]

If you can give me a few more pointers on how to debug common issues (I'm using Visual Studio Code — Insiders) I'd be happy to debug further to provide more valuable feedback.

[houmark]

I did look in the Output (console of VS Code) -> ESLint but no errors shows up, compile-time is just super slow, but fast refresh does happen... after ~10 seconds.

[houmark]

Also, sorry for dropping comments here bit by bit, but I did start a new dummy project with CRA 4.0 and compile was fast. Obviously almost no code in that project, but I wanted to check if CRA had some issues with my system in general. I'm running Node LTS v12.19.0.

[abhijithvijayan]

I will test this out myself

[houmark]

Just a quick update here. It seems other people have a very related issue with CRA 4.x, more here.

One person mentions his "solution" was out-commenting libraries, which is the same experience as I had. Obviously not a solution, but this may be a problem with CRA and maybe there's nothing you can do about it.

[abhijithvijayan]

Cool. I was sure that it had something to do with the new update. Either one of the dependency within the linting configuration has issue with the CRA v4.

I suggest you do a workaround for this for now.

I dont currently have a medium or large sized project that uses CRA.

Also, you have migrated from eslint-config-onepass to the new package @abhijithvijayan/eslint-config right? The old package will not be maintained but will be left as such for some old projects that are depended on it.