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

Question

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

phipag opened this issue 4 years ago · 26 comments

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: gatsby-i18n@0.1.0
npm ERR! Found: react@17.0.1
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 gatsby-plugin-netlify-cms@5.0.0
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 netlify-cms-app@2.14.29
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 gatsby-plugin-netlify-cms@5.0.0
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

Answer 1 · 2021-03-23T19:37:53.000Z

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

Answer 2 · 2021-03-29T09:21:10.000Z

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).

Answer 3 · 2021-03-31T07:53:38.000Z

@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.

Answer 4 · 2021-03-31T08:22:18.000Z

@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

Answer 5 · 2021-04-05T14:05:46.000Z

@erezrokah Hey, I don't mean to be rude but, when is this going to be fixed? I can't use netlify cms with react@17.0.2 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?

Answer 6 · 2021-04-05T14:09:05.000Z

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:

Answer 7 · 2021-04-28T14:22:38.000Z

@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.

Answer 8 · 2021-04-28T14:31:43.000Z

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

Answer 9 · 2021-04-28T17:50:28.000Z

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

Answer 10 · 2021-04-29T01:58:36.000Z

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

Answer 11 · 2021-04-29T05:02:21.000Z

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 gatsby@3.4.0. Excluding the plugin removes the erroer (but is obivisously not a solution).

Answer 12 · 2021-04-30T17:12:38.000Z

We are also facing same issue

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

Answer 13 · 2021-04-30T17:27:44.000Z

Can confirm the issue.

Answer 14 · 2021-04-30T17:53:02.000Z

@erezrokah How should I go about fixing this?

Answer 15 · 2021-04-30T18:21:10.000Z

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

Answer 16 · 2021-04-30T19:02:41.000Z

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.

Answer 17 · 2021-04-30T19:30:54.000Z

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

Answer 18 · 2021-05-03T16:10:49.000Z

FYI, we released netlify-cms@2.10.120-beta.0 and netlify-cms-app@2.15.0-beta.0 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

Answer 19 · 2021-05-03T17:18:07.000Z

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.

Answer 20 · 2021-05-03T17:19:55.000Z

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

Answer 21 · 2021-05-03T17:30:40.000Z

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

Answer 22 · 2021-05-03T18:00:57.000Z

I can confirm that it works now.

Answer 23 · 2021-05-04T08:40:42.000Z

Thanks @BA1RY for taking this on and everyone else that tested it.
This should be resolved in netlify-cms@2.10.120 and netlify-cms-app@2.15.0 via.

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

Answer 24 · 2021-07-21T22:38:33.000Z

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 netlify-cms-app@2.14.45 gatsby-plugin-netlify-cms@5.3.0 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?

Answer 25 · 2021-10-25T08:52:43.000Z

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

Answer 26 · 2022-10-21T06:51:56.000Z

Is anyone else encountering this issue?

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! Found: react@17.0.2
npm ERR! node_modules/react
npm ERR!   react@"17.0.2" from the root project
npm ERR!   peer react@">=16.x" from @fortawesome/react-fontawesome@0.1.18
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 react-split-pane@0.1.92
npm ERR! node_modules/netlify-cms-core/node_modules/react-split-pane
npm ERR!   react-split-pane@"^0.1.85" from netlify-cms-core@2.55.2
npm ERR!   node_modules/netlify-cms-core
npm ERR!     netlify-cms-core@"^2.55.2" from netlify-cms-app@2.15.72
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?