Upgrade babel-loader to 8.2.1

[cseas]

Describe the bug

npm start is giving me the following error:

The react-scripts package provided by Create React App requires a dependency:
  "babel-loader": "8.1.0"

npm ls babel-loader returns the following output:

├─┬ @storybook/react@6.1.2
│ └─┬ @storybook/core@6.1.2
│   └── babel-loader@8.2.1 
└─┬ react-scripts@4.0.0
  └── babel-loader@8.1.0

Did you try recovering your dependencies?

Yes

Which terms did you search for in User Guide?

babel-loader

Environment

current version of create-react-app: 4.0.0
  running from /home/abhijeet/.npm/_npx/375491/lib/node_modules/create-react-app

  System:
    OS: Linux 5.4 Ubuntu 20.04.1 LTS (Focal Fossa)
    CPU: (4) x64 Intel(R) Core(TM) i5-6200U CPU @ 2.30GHz
  Binaries:
    Node: 14.15.1 - /usr/bin/node
    Yarn: Not Found
    npm: 6.14.8 - /usr/local/bin/npm
  Browsers:
    Chrome: 87.0.4280.66
    Firefox: 83.0
  npmPackages:
    react: ^17.0.1 => 17.0.1 (16.14.0)
    react-dom: ^17.0.1 => 17.0.1 (16.14.0)
    react-scripts: ^4.0.0-next.98 => 4.0.0 
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

Run npm start in a CRA project after upgrading to @storybook/react@6.1.2

Expected behavior

No errors

Actual behavior

npm start throws error and doesn't run the application

[cseas]

Related storybook thread: storybookjs/storybook#13183 (comment)

[ChristianIvicevic]

To disable the warning temporarily and be able to run storybook properly you can just pin babel-loader manually to v8.1.0 until a proper solution has been found how Storybook will handle the dependency on that package in combination with CRA.

[cseas]

To disable the warning temporarily, I just added the following flag to a .env file:
SKIP_PREFLIGHT_CHECK=true

But that's not a solution. That's just disabling the warning.

[RZarifov]

Got the same warning but this time for 8.2.2
More specifically react-static uses 8.2.2 babel-loader yet react-scripts still uses 8.1.0.

npm ls babel-loader
my-app@0.1.0 /home/xeizzeth/DATA/Projects/mobile_app/delete_me_demo_site_semantic/my-app
├─┬ react-scripts@4.0.1
│ └── babel-loader@8.1.0 
└─┬ react-static@7.4.2
  └── babel-loader@8.2.2 

Also created .env file with SKIP_PREFLIGHT_CHECK=true but still, this is not the solution.

[cseas]

I ended up with just manually installing babel-loader to the project.
npm install babel-loader@8.2.1

That seems to make the warning go away, and maybe that is a solution for cases like this. But the warning that react-scripts generates advises against this solution by clearly mentioning Don't try to install it manually. Why is that statement included? That seems to be the only solution.

Instead straight up the warning should be "Try to install it manually if nothing else works".

[AskAlice]

storybookjs/storybook#4764 (comment)

[marksy]

@shilman does Storybook require babel-loader@8.2.1 or can we get away with the same version as react-scripts @8.1.0?

[shilman]

@marksy I believe babel-loader@8.2.1 fixes a bug that we had, though Storybook should generally work with 8.1.0 also. That said, I recently updated Storybook so that addon-docs can use the version of babel-loader already available in @storybook/core so the entire issue should be moot now.

• PR: Addon-docs: Resolve babel-loader from storybook/core storybookjs/storybook#13607
• Available in: 6.1.12+ and 6.2.0-alpha.x

[marksy]

Thanks @shilman v6.1.12 fixed my issue 👍🏼

[Byronium]

I'm still seeing this issue and confused by the fix - it doesn't matter that addon-docs now uses the babel-loader version from @storybook/core if @storybook/core is still downloading 8.2.2 by default.

When I run npm ls babel-loader I still get

react-app-ts@0.1.0 /Users/byronium/my-app
├─┬ @storybook/react@6.1.21
│ └─┬ @storybook/core@6.1.21
│   └── babel-loader@8.2.2 
└─┬ react-scripts@4.0.3
  └── babel-loader@8.1.0 

as many other people have mentioned, resulting in the same error when I run npm start:

There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.

The react-scripts package provided by Create React App requires a dependency:

  "babel-loader": "8.1.0"

Don't try to install it manually: your package manager does it automatically.
However, a different version of babel-loader was detected higher up in the tree:

  /Users/byronium/my-app/node_modules/babel-loader (version: 8.2.2) 

Manually installing incompatible versions is known to cause hard-to-debug issues.

If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That will permanently disable this message but you might encounter other issues.

...

I've had to use storybookjs/storybook#4764 (comment) as a workaround.

[Yama-Tomo]

The reason for the error is that we are verifying a package versions that is higher up the tree. (#3771)
This error occurs when multiple versions are installed in the project.

(I think it's enough to verify only the package versions that react-scripts resolves with require.resolve, but I'm not sure why we need to verify all the way up the tree.)

[jas7457]

@Yama-Tomo is this something that is being changed in create-react-app? I ran into this issue today. I'm using yarn workspaces, one workspace being a CRA. After updating some deps, I'm seeing this issue because the main repo's node_modules does include an updated babel-loader, but cra shouldn't care about that.

[tylerthehaas]

It seems to me this issue would be resolved if we changed this line to

"babel-loader": "^8.2.2"

Does anyone see a problem with doing that?