Add React ^17.0.0 as peer dependency to support Gatsby v3 and "gatsby-plugin-netlify-cms": "^5.0.0" #5111

phipag · 2021-03-14T15:26:17Z

Describe the bug
With the release of Gatsby v3 and "gatsby-plugin-netlify-cms": "^5.0.0" the move to React 17 has been made. netlify-cms-app however requires React 16 as peer dependency. This is a request to add React 17.

To Reproduce

Include gatsby-plugin-netlify-cms": "^5.0.0", and "netlify-cms-app": "^2.14.29" to your package.json
Make sure you are on npm >=7.0 as this uses the new peer dependency resolution
Run npm install

Expected behavior

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"^17.0.1" from the root project
npm ERR!   peer react@"^16.9.0 || ^17.0.0" from [email protected]
npm ERR!   node_modules/gatsby-plugin-netlify-cms
npm ERR!     gatsby-plugin-netlify-cms@"^5.0.0" from the root project
npm ERR!   2 more (gatsby, react-dom)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.4" from [email protected]
npm ERR! node_modules/netlify-cms-app
npm ERR!   netlify-cms-app@"^2.14.29" from the root project
npm ERR!   peer netlify-cms-app@"^2.9.0" from [email protected]
npm ERR!   node_modules/gatsby-plugin-netlify-cms
npm ERR!     gatsby-plugin-netlify-cms@"^5.0.0" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

Current workaround
Use the npm --legacy-peer-deps flag and install by npm install --legacy-peer-deps

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

shashank-bairy · 2021-03-23T19:37:53Z

Hi @erezrokah, I would like to work on this. How should I go about implementing this? 😄

erezrokah · 2021-03-29T09:21:10Z

Hi @BA1RY thanks. I would first update all the direct and peer dependencies in all the monorepo packages and see what breaks :) Updating React might require updating other dependencies as well.

Finally this should probably be under a major version release since it's a breaking change so we would need to see if we want to include anything else under that release (maybe an emotion + slate upgrade + dropping immutable).

shashank-bairy · 2021-03-31T07:53:38Z

@erezrokah So did you mean I should update all the direct and peer dependencies for all packages in https://github.com/netlify/netlify-cms/tree/master/packages to React 17? Please correct me if I'm wrong.

erezrokah · 2021-03-31T08:22:18Z

@erezrokah So did you mean I should update all the direct and peer dependencies for all packages in https://github.com/netlify/netlify-cms/tree/master/packages to React 17

💯 You're correct - that would be the first step

arpitdalal · 2021-04-05T14:05:46Z

@erezrokah Hey, I don't mean to be rude but, when is this going to be fixed? I can't use netlify cms with [email protected] and I don't want to downgrade react to v16 because if I do, I will have to downgrade a lot of dependencies of my project and it would be just too much hassle. Is there a workaround of sorts?

erezrokah · 2021-04-05T14:09:05Z

Hi @arpitdalal, the CMS is a community project so the best way to fix this is via a contribution.
A workaround is suggested in the issue description:

erezrokah · 2021-04-28T14:22:38Z

@BA1RY, I think we could unblock users without having to do a breaking change. As the original issue suggests we can start by updating "react": "^16.8.4" to "react": "^16.8.4 || ^17.0.0" in our peer dependencies.

Please let me know if you'd like to start with that.

shashank-bairy · 2021-04-28T14:31:43Z

@erezrokah Sure, understood. I'll make the required changes.

shashank-bairy · 2021-04-28T17:50:28Z

Hi @erezrokah , I've made a PR according to your instructions. Made the changes for required packages inside https://github.com/netlify/netlify-cms/tree/master/packages. Please have a look at it. Thanks

MartinSchere · 2021-04-29T01:58:36Z

Using the workaround I get:
Error: ObjectMiddleware.register: serializer for mini-css-extract-plugin/dist/CssModule/null is already registered
when including it in gatsby-config.js

JannikWempe · 2021-04-29T05:02:21Z

Using the workaround I get:
Error: ObjectMiddleware.register: serializer for mini-css-extract-plugin/dist/CssModule/null is already registered
when including it in gatsby-config.js

Same issue here using gatsby-plugin-netlify-cms@~5.4.0 and [email protected]. Excluding the plugin removes the erroer (but is obivisously not a solution).

munawar-js · 2021-04-30T17:12:38Z

We are also facing same issue

Error: ObjectMiddleware.register: serializer for mini-css-extract-plugin/dist/CssModule/null is already registered

phipag · 2021-04-30T17:27:44Z

Can confirm the issue.

shashank-bairy · 2021-04-30T17:53:02Z

@erezrokah How should I go about fixing this?

munawar-js · 2021-04-30T18:21:10Z

Remove ^ in your plugin version, then npm install and you server would run without errors

On Fri, 30 Apr 2021 at 11:23 PM, Shashank Bairy R ***@***.***> wrote: @erezrokah <https://github.com/erezrokah> How should I go about fixing this? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#5111 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABSEYMKXDLX247JOJFFYCO3TLLVBTANCNFSM4ZFCOERQ> .

-- Warm Regards, Munawar

shashank-bairy · 2021-04-30T19:02:41Z

Thanks @munwr, that surely solves the above error. 😃
It seems like a temporary fix and I wanted to know if there were any changes to be made in my PR to solve the above error in future releases.

MartinSchere · 2021-04-30T19:30:54Z

@munwr @phipag I'm opening a new issue with this: #5321

erezrokah · 2021-05-03T16:10:49Z

FYI, we released [email protected] and [email protected] with the fix from #5316.

Can you please verify those versions solve the issue? Once the fix is verified we'll do an official release

shashank-bairy · 2021-05-03T17:18:07Z

Hi @erezrokah , it's working for me. Used "netlify-cms-app": "2.15.0-beta.0" and "gatsby-plugin-netlify-cms": "5.3.0" inside gatsby-starter-blog and installed them using npm install --legacy-peer-deps. gatsby develop runs successfully.

erezrokah · 2021-05-03T17:19:55Z

Hi @BA1RY, you should be able to install them without the --legacy-peer-deps flag using npm@7

shashank-bairy · 2021-05-03T17:30:40Z

Hi @erezrokah , Just checked. It works with just npm install 😃

phipag · 2021-05-03T18:00:57Z

I can confirm that it works now.

erezrokah · 2021-05-04T08:40:42Z

Thanks @BA1RY for taking this on and everyone else that tested it.
This should be resolved in [email protected] and [email protected] via.

Please comment it upgrading to the latest version doesn't solve it.

dehanz13 · 2021-07-21T22:38:33Z

Hi @arpitdalal, the CMS is a community project so the best way to fix this is via a contribution.
A workaround is suggested in the issue description:

I tried using yarn add [email protected] [email protected] and it worked! The problem is that now i'm using yarn and npm together. Does anyone have any thoughts on how to solve this issue?

nitishbhardwaj00 · 2021-10-25T08:52:43Z

run npm install --legacy-peer-deps and upload your package-lock.json file too it will solve the dependency error ... I have tried it on netlify

vai0 · 2022-10-21T06:51:56Z

Is anyone else encountering this issue?

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"17.0.2" from the root project
npm ERR!   peer react@">=16.x" from @fortawesome/[email protected]
npm ERR!   node_modules/@fortawesome/react-fontawesome
npm ERR!     @fortawesome/react-fontawesome@"0.1.18" from the root project
npm ERR!   103 more (@gatsbyjs/reach-router, react-dom, @mdx-js/react, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.0.0-0" from [email protected]
npm ERR! node_modules/netlify-cms-core/node_modules/react-split-pane
npm ERR!   react-split-pane@"^0.1.85" from [email protected]
npm ERR!   node_modules/netlify-cms-core
npm ERR!     netlify-cms-core@"^2.55.2" from [email protected]
npm ERR!     node_modules/netlify-cms-app
npm ERR!       netlify-cms-app@"2.15.72" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

It seems as though netlify-cms-app is depending on netlify-cms-core which is depending on react-split-pane -- which expects v16 while I'm on v17. I've never seen a sub-dependency depend on my top-level app's peer dependency

How is this solved?

phipag added the type: bug code to address defects in shipped code label Mar 14, 2021

phipag changed the title ~~Add React ^17.0.0 as peer dependency to support Gatsby v3 and "gatsby-plugin-netlify-cms": "^5.0.0"~~ Add React ^17.0.0 as peer dependency to support Gatsby v3 and "gatsby-plugin-netlify-cms": "^5.0.0" Mar 14, 2021

erezrokah added type: feature code contributing to the implementation of a feature and/or user facing functionality ssg: gatsby and removed type: bug code to address defects in shipped code labels Mar 14, 2021

erezrokah mentioned this issue Apr 15, 2021

Hard to use with CSS-in-JS libs. #793

Open

erezrokah mentioned this issue Apr 28, 2021

Netlify cms app not compatible with react 17?! #5315

Closed

shashank-bairy mentioned this issue Apr 28, 2021

feat: added react 17 as peer dependency in packages #5316

Merged

MartinSchere mentioned this issue Apr 30, 2021

Error: ObjectMiddleware.register: serializer for mini-css-extract-plugin/dist/CssModule/null is already registered when using React 17 and netlify CMS #5321

Open

erezrokah closed this as completed May 4, 2021

something-something-something mentioned this issue May 12, 2021

netlify-cms-app fails to install with react 17 as version 6 of react-aria-menubutton in incompatible with react 17 #5376

Closed

Isaac-Tait mentioned this issue May 15, 2023

netlify-cms-app not compatible with react 18 #6773

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add React ^17.0.0 as peer dependency to support Gatsby v3 and "gatsby-plugin-netlify-cms": "^5.0.0" #5111

Add React ^17.0.0 as peer dependency to support Gatsby v3 and "gatsby-plugin-netlify-cms": "^5.0.0" #5111

phipag commented Mar 14, 2021

shashank-bairy commented Mar 23, 2021 •

edited

Loading

erezrokah commented Mar 29, 2021

shashank-bairy commented Mar 31, 2021

erezrokah commented Mar 31, 2021

arpitdalal commented Apr 5, 2021

erezrokah commented Apr 5, 2021

erezrokah commented Apr 28, 2021 •

edited

Loading

shashank-bairy commented Apr 28, 2021

shashank-bairy commented Apr 28, 2021

MartinSchere commented Apr 29, 2021

JannikWempe commented Apr 29, 2021

munawar-js commented Apr 30, 2021

phipag commented Apr 30, 2021

shashank-bairy commented Apr 30, 2021

munawar-js commented Apr 30, 2021 via email

shashank-bairy commented Apr 30, 2021

MartinSchere commented Apr 30, 2021

erezrokah commented May 3, 2021

shashank-bairy commented May 3, 2021 •

edited

Loading

erezrokah commented May 3, 2021

shashank-bairy commented May 3, 2021

phipag commented May 3, 2021

erezrokah commented May 4, 2021

dehanz13 commented Jul 21, 2021

nitishbhardwaj00 commented Oct 25, 2021

vai0 commented Oct 21, 2022

Add React ^17.0.0 as peer dependency to support Gatsby v3 and "gatsby-plugin-netlify-cms": "^5.0.0" #5111

Add React ^17.0.0 as peer dependency to support Gatsby v3 and "gatsby-plugin-netlify-cms": "^5.0.0" #5111

Comments

phipag commented Mar 14, 2021

shashank-bairy commented Mar 23, 2021 • edited Loading

erezrokah commented Mar 29, 2021

shashank-bairy commented Mar 31, 2021

erezrokah commented Mar 31, 2021

arpitdalal commented Apr 5, 2021

erezrokah commented Apr 5, 2021

erezrokah commented Apr 28, 2021 • edited Loading

shashank-bairy commented Apr 28, 2021

shashank-bairy commented Apr 28, 2021

MartinSchere commented Apr 29, 2021

JannikWempe commented Apr 29, 2021

munawar-js commented Apr 30, 2021

phipag commented Apr 30, 2021

shashank-bairy commented Apr 30, 2021

munawar-js commented Apr 30, 2021 via email

shashank-bairy commented Apr 30, 2021

MartinSchere commented Apr 30, 2021

erezrokah commented May 3, 2021

shashank-bairy commented May 3, 2021 • edited Loading

erezrokah commented May 3, 2021

shashank-bairy commented May 3, 2021

phipag commented May 3, 2021

erezrokah commented May 4, 2021

dehanz13 commented Jul 21, 2021

nitishbhardwaj00 commented Oct 25, 2021

vai0 commented Oct 21, 2022

shashank-bairy commented Mar 23, 2021 •

edited

Loading

erezrokah commented Apr 28, 2021 •

edited

Loading

shashank-bairy commented May 3, 2021 •

edited

Loading