Rebuild times of storybook have been to high ever since upgrading from CRA 3.4 to CRA 4 (React 16 to React 17)

[ChristianIvicevic]

Describe the bug
Just recently I noticed a huge increase in build times, even for small changes such as changing a SCSS variable. Previously SCSS changes have been updated in a matter of less than 500ms while they take 5-10s now. It feels as if storybook is rebuilding too much ever since upgrading to React 17 irrespective of the storybook version. The behavior is similar with the versions 6.0.26-28 and 6.1-beta. I tracked it down in my personal commit history to the commit where I upgraded to React 17 and CRA 4 thus I presume the issue is the integration with CRA.

I don't know to which extent I help to track down this issue, I am currently working on a small reproduction MWE.

Expected behavior
Quicker rebuild process for smaller changes. SCSS changes should be propagated almost instantly while changes in Typescript files should not require this much recompilation time.

System
Environment Info:

System:
OS: macOS 10.15.7
CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
Binaries:
Node: 14.15.0 - ~/.nvm/versions/node/v14.15.0/bin/node
Yarn: 1.22.10 - ~/.nvm/versions/node/v14.15.0/bin/yarn
npm: 6.14.8 - ~/.nvm/versions/node/v14.15.0/bin/npm
Browsers:
Chrome: 86.0.4240.193
Safari: 14.0
npmPackages:
@storybook/addon-actions: 6.1.0-rc.2 => 6.1.0-rc.2
@storybook/addon-essentials: 6.1.0-rc.2 => 6.1.0-rc.2
@storybook/addon-links: 6.1.0-rc.2 => 6.1.0-rc.2
@storybook/addon-storyshots: 6.1.0-rc.2 => 6.1.0-rc.2
@storybook/node-logger: 6.1.0-rc.2 => 6.1.0-rc.2
@storybook/preset-create-react-app: 3.1.5 => 3.1.5
@storybook/react: 6.1.0-rc.2 => 6.1.0-rc.2

[shilman]

@ChristianIvicevic do you need to enable fastRefresh by adding the following to .storybook/main.js?

module.exports = {
  ...,
  reactOptions: {
    fastRefresh: true,
  }
}

see #12470

@tooppaaa @yannbf should we make this default in the CRA template? do we need to update the docs?

[ChristianIvicevic]

I just found the issue, it is in fact upstream in CRA. The caching of the ESLintPlugin in the Webpack config has not been enabled in CRA: facebook/create-react-app#9911
Fixing this manually and saving a patch-package created patch has reduced the compilation times immense back to CRA3.4 times. Unfortunately they are not going to release CRA 4.0.1 anytime soon, but this is just ranting on my end.

Btw trying to add the fastRefresh option causes errors in the console claiming it is already enabled by default apparently.

Closing this issue now, since it's a CRA issue.