React 18 support

[Undistraction]

Is your feature request related to a problem? Please describe.

React 18 was released in March, but this project has its dependencies pinned to React 17.

Describe the solution you'd like

Support for React 18

Describe alternatives you've considered

None.

** List of dependency warnings after upgrading to React 18.2 **

warning " > netlify-cms-app@2.15.72" has incorrect peer dependency "react@^16.8.4 || ^17.0.0".
warning " > netlify-cms-app@2.15.72" has incorrect peer dependency "react-dom@^16.8.4 || ^17.0.0".
warning "netlify-cms-app > netlify-cms-backend-azure@1.3.1" has incorrect peer dependency "react@^16.8.4 || ^17.0.0".
warning "netlify-cms-app > netlify-cms-backend-bitbucket@2.14.0" has incorrect peer dependency "react@^16.8.4 || ^17.0.0".
warning "netlify-cms-app > netlify-cms-backend-git-gateway@2.13.1" has incorrect peer dependency "react@^16.8.4 || ^17.0.0".
warning "netlify-cms-app > netlify-cms-backend-github@2.14.1" has incorrect peer dependency "react@^16.8.4 || ^17.0.0".
warning "netlify-cms-app > netlify-cms-backend-gitlab@2.13.0" has incorrect peer dependency "react@^16.8.4 || ^17.0.0".
warning "netlify-cms-app > netlify-cms-backend-proxy@1.2.3" has incorrect peer dependency "react@^16.8.4 || ^17.0.0".
warning "netlify-cms-app > netlify-cms-backend-test@2.11.3" has incorrect peer dependency "react@^16.8.4 || ^17.0.0".
warning "netlify-cms-app > netlify-cms-core@2.55.2" has incorrect peer dependency "react@^16.8.4 || ^17.0.0".
warning "netlify-cms-app > netlify-cms-core@2.55.2" has incorrect peer dependency "react-dom@^16.8.4 || ^17.0.0".
warning "netlify-cms-app > netlify-cms-editor-component-image@2.7.0" has incorrect peer dependency "react@^16.8.4 || ^17.0.0".
warning "netlify-cms-app > netlify-cms-ui-default@2.15.5" has incorrect peer dependency "react@^16.8.4 || ^17.0.0".
warning "netlify-cms-app > netlify-cms-widget-boolean@2.4.1" has incorrect peer dependency "react@^16.8.4 || ^17.0.0".
warning "netlify-cms-app > netlify-cms-widget-code@1.3.4" has incorrect peer dependency "react@^16.8.4 || ^17.0.0".
warning "netlify-cms-app > netlify-cms-widget-colorstring@1.1.2" has incorrect peer dependency "react@^16.8.4 || ^17.0.0".
warning "netlify-cms-app > netlify-cms-widget-date@2.6.3" has incorrect peer dependency "react@^16.8.4 || ^17.0.0".
warning "netlify-cms-app > netlify-cms-widget-date@2.6.3" has incorrect peer dependency "react-dom@^16.8.4 || ^17.0.0".
warning "netlify-cms-app > netlify-cms-widget-datetime@2.7.4" has incorrect peer dependency "react@^16.8.4 || ^17.0.0".
warning "netlify-cms-app > netlify-cms-widget-file@2.12.1" has incorrect peer dependency "react@^16.8.4 || ^17.0.0".
warning "netlify-cms-app > netlify-cms-widget-image@2.8.1" has incorrect peer dependency "react@^16.8.4 || ^17.0.0".
warning "netlify-cms-app > netlify-cms-widget-list@2.10.1" has incorrect peer dependency "react@^16.8.4 || ^17.0.0".
warning "netlify-cms-app > netlify-cms-widget-map@1.5.1" has incorrect peer dependency "react@^16.8.4 || ^17.0.0".
warning "netlify-cms-app > netlify-cms-widget-markdown@2.15.1" has incorrect peer dependency "react@^16.8.4 || ^17.0.0".
warning "netlify-cms-app > netlify-cms-widget-markdown@2.15.1" has incorrect peer dependency "react-dom@^16.8.4 || ^17.0.0".
warning "netlify-cms-app > netlify-cms-widget-number@2.5.0" has incorrect peer dependency "react@^16.8.4 || ^17.0.0".
warning "netlify-cms-app > netlify-cms-widget-object@2.7.2" has incorrect peer dependency "react@^16.8.4 || ^17.0.0".
warning "netlify-cms-app > netlify-cms-widget-relation@2.11.1" has incorrect peer dependency "react@^16.8.4 || ^17.0.0".
warning "netlify-cms-app > netlify-cms-widget-select@2.8.2" has incorrect peer dependency "react@^16.8.4 || ^17.0.0".
warning "netlify-cms-app > netlify-cms-widget-string@2.3.0" has incorrect peer dependency "react@^16.8.4 || ^17.0.0".
warning "netlify-cms-app > netlify-cms-widget-text@2.4.1" has incorrect peer dependency "react@^16.8.4 || ^17.0.0".
warning "netlify-cms-app > netlify-cms-ui-default > react-aria-menubutton@7.0.2" has incorrect peer dependency "react@^16.3.0 || ^17.0.0".
warning "netlify-cms-app > netlify-cms-widget-code > react-codemirror2@7.2.1" has incorrect peer dependency "react@>=15.5 <=16.x".
warning "netlify-cms-app > netlify-cms-widget-code > react-select@4.3.1" has incorrect peer dependency "react@^16.8.0 || ^17.0.0".
warning "netlify-cms-app > netlify-cms-widget-code > react-select@4.3.1" has incorrect peer dependency "react-dom@^16.8.0 || ^17.0.0".
warning "netlify-cms-app > netlify-cms-widget-colorstring > validate-color@2.1.0" has incorrect peer dependency "react@^16.13.1".
warning "netlify-cms-app > netlify-cms-widget-colorstring > validate-color@2.1.0" has incorrect peer dependency "react-dom@^16.13.1".
warning "netlify-cms-app > netlify-cms-widget-date > react-datetime@3.1.1" has incorrect peer dependency "react@^16.5.0 || ^17.0.0".
warning "netlify-cms-app > netlify-cms-widget-text > react-textarea-autosize@8.2.0" has incorrect peer dependency "react@^16.8.0".
warning "netlify-cms-app > netlify-cms-core > redux-notifications > react-redux@4.4.10" has incorrect peer dependency "redux@^2.0.0 || ^3.0.0".
warning "netlify-cms-app > netlify-cms-widget-text > react-textarea-autosize > use-composed-ref@1.0.0" has incorrect peer dependency "react@^16.8.0".
warning "netlify-cms-app > netlify-cms-widget-text > react-textarea-autosize > use-latest@1.1.0" has incorrect peer dependency "react@^16.8.0".
warning "netlify-cms-app > netlify-cms-widget-text > react-textarea-autosize > use-latest > use-isomorphic-layout-effect@1.0.0" has incorrect peer dependency "react@^16.8.0".

[chrislodev]

+1 - we seem to have hit this same issue as well.

[mosesoak]

More importantly the build was failing (see https://answers.netlify.com/t/error-being-thrown-by-gatsby-plugin-netlify-cms/54668) -- however, even though the package.json does need updating for the cms to support react 18, we are now able to build using the latest version of the cms. 🎉

In order to avoid multiple installs we've added this:

  "resolutions": {
    "react": "^18.2.0",
    "@types/react": "^18.0.17",
    "react-dom": "^18.2.0"
  }

(at time of writing these are the latest versions, but the point is that if you look in your yarn.lock you shouldn't see React/react-dom v16 getting installed alongside React 18)

Build succeeded using node 16.

In short, React 18 is supported, the maintainers of this package just need to update their package.json.

[ChristofferKarlsson]

More importantly the build was failing (see https://answers.netlify.com/t/error-being-thrown-by-gatsby-plugin-netlify-cms/54668) -- however, even though the package.json does need updating for the cms to support react 18, we are now able to build using the latest version of the cms. tada

In order to avoid multiple installs we've added this:

  "resolutions": {
    "react": "^18.2.0",
    "@types/react": "^18.0.17",
    "react-dom": "^18.2.0"
  }

(at time of writing these are the latest versions, but the point is that if you look in your yarn.lock you shouldn't see React/react-dom v16 getting installed alongside React 18)

Build succeeded using node 16.

In short, React 18 is supported, the maintainers of this package just need to update their package.json.

Thanks! With a slight modification, I got this to work using npm as well.

  "overrides": {
    "react": "^18.2.0",
    "@types/react": "^18.0.17",
    "react-dom": "^18.2.0"
  }

[JWesorick]

In my browser console:

Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot

So I think this is React 18 just pretending it's React 17 more than netlify-cms-app supporting React 17.

[justinasjustinas]

Any news from Netlify on this?

I'm still not able to install gatsby-plugin-netlify-cms, unfortunately.

[nolafs]

I have working on local dev with error with nextjs on react18 but when deployed, getting an error from the next/dynamic module with page covered with error message in the middle. Anybody got an idea how trick next to not report error?

[pascalbe-dev]

Experiencing the same issue. We need compatibility with React 18.

[Undistraction]

For anyone waiting for a response I'm afraid it looks like this project is dead:

[nolafs]

yep, seems the project is dead. I moved my project to StaticCms https://github.com/StaticJsCMS/static-cms.

[kjetilhartveit]

About the future of Netlify CMS (or Decap CMS rather): #6704

[Isaac-Tait]

Any updates on when we can expect React 18 support?

[mosesoak]

See above, it's not happening

[Isaac-Tait]

@mosesoak Those are old comments I believe. As of May 16th they were working on it (#6773 (comment))

[martinjagodic]

Yes, this is happening. However, there is no fixed date yet.

[carmenchapa]

Any update on this? Or a workaround in the meantime?
Thanks

[Chevindu]

This seems to be merged now: #6941