Upgrade babel-loader to 8.2.1 #10123

cseas · 2020-11-21T09:39:21Z

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

The text was updated successfully, but these errors were encountered:

cseas · 2020-11-21T11:30:34Z

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

ChristianIvicevic · 2020-11-23T02:23:53Z

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 · 2020-11-23T18:57:52Z

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 · 2020-12-02T12:03:24Z

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 · 2020-12-02T18:08:46Z

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 · 2020-12-14T06:29:59Z

storybookjs/storybook#4764 (comment)

marksy · 2021-01-13T02:19:15Z

@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 · 2021-01-13T02:44:11Z

@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 · 2021-01-14T01:58:57Z

Thanks @shilman v6.1.12 fixed my issue 👍🏼

Byronium · 2021-03-25T18:43:53Z

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 · 2021-04-01T06:31:23Z

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 · 2021-04-06T23:09:26Z

@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 · 2021-04-29T15:37:07Z

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?

Merge in BIAP/act-frontend from ~ODINS/act-frontend:feature/ARGUS-23872-update-dependencies to master Squashed commit of the following: commit e759c1a74ee2c42d29324d530702aadfec155adb Author: Odin Standal <odins@mnemonic.no> Date: Fri Jun 25 10:41:54 2021 +0200 ARGUS-23872 Update dependencies - babel-loader is set to 8.1.0 even though storybook uses a newer version, see facebook/create-react-app#10123 - reformat with prettier - bugfix: only close singleValueFilter when clicking outside - bugfix: fix cytoscape highlighting - bugfix: show WorkingHistory load progress when loading starts

Newbie012 · 2021-07-06T11:28:14Z

What's the cause of not updating babel-loader to the latest version? is there something that the community can help with to move further with this issue?

using SKIP_PREFLIGHT_CHECK doesn't seem like a recommended idea.

Currently, you can't use CRA & Storybook without the flag SKIP_PREFLIGHT_CHECK.

yushanwebdev · 2021-07-27T13:02:20Z

Now, this issue did not come when use NPM as the package manager. With Yarn that issue still exists.

kof · 2021-08-26T09:11:39Z

can't CRA just upgrade to the latest babel-loader?

poddarkhushbu07 · 2021-10-04T11:37:13Z

npm install --save-dev @babel/core @babel/cli @babel/preset-env

I am creating a library using CRA and want to install these babel dependencies, how can I know the exact compatible of these dependencies which are compatible with my CRA app?

vacekj · 2021-12-20T11:00:14Z

Bringing this issue back online since it is still not solved. Should I create a PR?

fabien-somnier · 2022-02-17T14:45:56Z

personally, this issue is finally solved, since we've upgraded react-scripts to 5.0.0 (which requires babel-loader@^8.2.3).

storybook has a conflict with cra due to versioning issues on babel loader and a faulty check on the cra side (see: storybookjs/storybook#13183 and facebook/create-react-app#10123 (comment)). this required either some hackery on the command side (by disabling preflight checks) or upgrading react-scripts to 5.0. as react scripts is not a direct dependency at runtime when serving our application, i opted for this approach. another issue that cropped up was postcss requiring version 8 due to transistive dependencies (design system -> chakra -> tailwind -> postcss). this was fixed by installing a direct dependency on postcss @ 8, which was the approach mentioned here: postcss/postcss-import#435. A dev mentioned that the API between 7/8 did not differ much and the release notes for 8 (https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users) also mentioned that there are no significant differences for end users, so this should be safe. tl;dr: build issues are fixed by upgrading dependencies. if you ever read this message, or any of the previous long commit messages, please drop me a :ultrafastparrot: thx

coinking95 · 2022-02-18T22:00:37Z

personally, this issue is finally solved, since we've upgraded react-scripts to 5.0.0 (which requires babel-loader@^8.2.3).

Fixed issue for me too 📈

cseas added issue: bug report needs triage labels Nov 21, 2020

haworku mentioned this issue May 3, 2021

Upgrade dependencies Enterprise-CMCS/managed-care-review#122

Merged

merceyz mentioned this issue Jun 1, 2021

lower babel-loader required version everywhere storybookjs/storybook#14811

Merged

cseas closed this as completed Feb 18, 2022

soujvnunes mentioned this issue Oct 11, 2022

[666] Icons not vertical-aligned correctly Polkamarkets/polkamarkets-web#158

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Upgrade babel-loader to 8.2.1 #10123

Upgrade babel-loader to 8.2.1 #10123

cseas commented Nov 21, 2020 •

edited

cseas commented Nov 21, 2020

ChristianIvicevic commented Nov 23, 2020

cseas commented Nov 23, 2020 •

edited

RZarifov commented Dec 2, 2020 •

edited

cseas commented Dec 2, 2020 •

edited

AskAlice commented Dec 14, 2020

marksy commented Jan 13, 2021

shilman commented Jan 13, 2021

marksy commented Jan 14, 2021

Byronium commented Mar 25, 2021 •

edited

Yama-Tomo commented Apr 1, 2021

jas7457 commented Apr 6, 2021

tylerthehaas commented Apr 29, 2021 •

edited

Newbie012 commented Jul 6, 2021 •

edited

yushanwebdev commented Jul 27, 2021 •

edited

kof commented Aug 26, 2021

poddarkhushbu07 commented Oct 4, 2021

vacekj commented Dec 20, 2021

fabien-somnier commented Feb 17, 2022

coinking95 commented Feb 18, 2022

Upgrade babel-loader to 8.2.1 #10123

Upgrade babel-loader to 8.2.1 #10123

Comments

cseas commented Nov 21, 2020 • edited

Describe the bug

Did you try recovering your dependencies?

Which terms did you search for in User Guide?

Environment

Steps to reproduce

Expected behavior

Actual behavior

cseas commented Nov 21, 2020

ChristianIvicevic commented Nov 23, 2020

cseas commented Nov 23, 2020 • edited

RZarifov commented Dec 2, 2020 • edited

cseas commented Dec 2, 2020 • edited

AskAlice commented Dec 14, 2020

marksy commented Jan 13, 2021

shilman commented Jan 13, 2021

marksy commented Jan 14, 2021

Byronium commented Mar 25, 2021 • edited

Yama-Tomo commented Apr 1, 2021

jas7457 commented Apr 6, 2021

tylerthehaas commented Apr 29, 2021 • edited

Newbie012 commented Jul 6, 2021 • edited

yushanwebdev commented Jul 27, 2021 • edited

kof commented Aug 26, 2021

poddarkhushbu07 commented Oct 4, 2021

vacekj commented Dec 20, 2021

fabien-somnier commented Feb 17, 2022

coinking95 commented Feb 18, 2022

cseas commented Nov 21, 2020 •

edited

cseas commented Nov 23, 2020 •

edited

RZarifov commented Dec 2, 2020 •

edited

cseas commented Dec 2, 2020 •

edited

Byronium commented Mar 25, 2021 •

edited

tylerthehaas commented Apr 29, 2021 •

edited

Newbie012 commented Jul 6, 2021 •

edited

yushanwebdev commented Jul 27, 2021 •

edited