netlify-cms-app not compatible with react 18 #6773
Description
It would seem this issue has cropped up a time or two albeit that was related to React 17.
Here is the error message I am getting:
5:50:11 PM: npm ERR! code ERESOLVE
5:50:12 PM: npm ERR! ERESOLVE could not resolve
5:50:12 PM: npm ERR!
5:50:12 PM: npm ERR! While resolving: netlify-cms-app@2.15.72
5:50:12 PM: npm ERR! Found: react@18.2.0
5:50:12 PM: npm ERR! node_modules/react
5:50:12 PM: npm ERR! react@"^18.2.0" from the root project
5:50:12 PM: npm ERR! peer react@">=16.3.0" from @emotion/core@10.3.1
5:50:12 PM: npm ERR! node_modules/@emotion/core
5:50:12 PM: npm ERR! peer @emotion/core@"^10.0.27" from @emotion/styled@10.3.0
5:50:12 PM: npm ERR! node_modules/@emotion/styled
5:50:12 PM: npm ERR! @emotion/styled@"^10.0.27" from netlify-cms-app@2.15.72
5:50:12 PM: npm ERR! node_modules/netlify-cms-app
5:50:12 PM: npm ERR! netlify-cms-app@"^2.15.72" from the root project
5:50:12 PM: npm ERR! 1 more (gatsby-plugin-netlify-cms)
5:50:12 PM: npm ERR! 17 more (netlify-cms-backend-azure, ...)
5:50:12 PM: npm ERR! peer @emotion/core@"^10.0.28" from @emotion/styled-base@10.3.0
5:50:12 PM: npm ERR! node_modules/@emotion/styled-base
5:50:12 PM: npm ERR! @emotion/styled-base@"^10.3.0" from @emotion/styled@10.3.0
5:50:12 PM: npm ERR! node_modules/@emotion/styled
5:50:12 PM: npm ERR! @emotion/styled@"^10.0.27" from netlify-cms-app@2.15.72
5:50:12 PM: npm ERR! node_modules/netlify-cms-app
5:50:12 PM: npm ERR! 17 more (netlify-cms-backend-azure, ...)
5:50:12 PM: npm ERR! 22 more (netlify-cms-app, netlify-cms-backend-azure, ...)
5:50:12 PM: npm ERR! 43 more (@emotion/react, @emotion/styled, @emotion/styled-base, ...)
5:50:12 PM: npm ERR!
5:50:12 PM: npm ERR! Could not resolve dependency:
5:50:12 PM: npm ERR! peer react@"^16.8.4 || ^17.0.0" from netlify-cms-app@2.15.72
5:50:12 PM: npm ERR! node_modules/netlify-cms-app
5:50:12 PM: npm ERR! netlify-cms-app@"^2.15.72" from the root project
5:50:12 PM: npm ERR! peer netlify-cms-app@"^2.9.0" from gatsby-plugin-netlify-cms@7.9.0
5:50:12 PM: npm ERR! node_modules/gatsby-plugin-netlify-cms
5:50:12 PM: npm ERR! gatsby-plugin-netlify-cms@"^7.9.0" from the root project
5:50:12 PM: npm ERR!
5:50:12 PM: npm ERR! Conflicting peer dependency: react@17.0.2
5:50:12 PM: npm ERR! node_modules/react
5:50:12 PM: npm ERR! peer react@"^16.8.4 || ^17.0.0" from netlify-cms-app@2.15.72
5:50:12 PM: npm ERR! node_modules/netlify-cms-app
5:50:12 PM: npm ERR! netlify-cms-app@"^2.15.72" from the root project
5:50:12 PM: npm ERR! peer netlify-cms-app@"^2.9.0" from gatsby-plugin-netlify-cms@7.9.0
5:50:12 PM: npm ERR! node_modules/gatsby-plugin-netlify-cms
5:50:12 PM: npm ERR! gatsby-plugin-netlify-cms@"^7.9.0" from the root project
5:50:12 PM: npm ERR!
5:50:12 PM: npm ERR! Fix the upstream dependency conflict, or retry
5:50:12 PM: npm ERR! this command with --force, or --legacy-peer-deps
5:50:12 PM: npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
Describe the bug
netlfy-cms-app appears to not be compatible with React 18 - I noticed the error when trying to deploy a deploy preview on Netlify.
To Reproduce
Run the following in an empty directory: npm init -y && npm i react react-dom && npm i netlify-cms-app
Expected behavior
Compatibility with React 18
CMS configuration
backend:
name: git-gateway
branch: main # Branch to update (optional; defaults to master)
media_folder: static/img
public_folder: src/images
collections:
- name: 'blog'
label: 'Blog'
folder: 'content/blog'
create: true
slug: 'index'
media_folder: ''
public_folder: ''
path: '{{title}}/index'
editor:
preview: false
fields:
- { label: 'Title', name: 'title', widget: 'string' }
- { label: 'Publish Date', name: 'date', widget: 'datetime' }
- { label: 'Description', name: 'description', widget: 'string' }
- { label: 'Body', name: 'body', widget: 'markdown' }
- { label: 'Image', name: 'image', widget: 'string' }
- { label: 'Image Alt', name: 'imageAlt', widget: 'string' }