Support react@18 in @rjsf/material-ui

[giuvincenzi]

Prerequisites

• I have searched the existing issues
• I understand that providing a SSCCE example is tremendously useful to the maintainers.
• I have read the documentation
• Ideally, I'm providing a sample JSFiddle or a shared playground link demonstrating the issue.

What theme are you using?

material-ui

Version

4.2.0

Current Behavior

Unable to install @rjsf/material-ui with react@18

npm ERR! Could not resolve dependency:
npm ERR! peer @types/react@"^16.8.6 || ^17.0.0" from @rjsf/material-ui@4.2.0
npm ERR! node_modules/@rjsf/material-ui
npm ERR!   @rjsf/material-ui@"*" 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.

• react@18
• @types/react@18
• @mui/material@5
• @mui/icons-material@5
• @rjsf/core@4

Expected Behavior

The package @rjsf/material-ui is installed without errors when using react@18.

Steps To Reproduce

No response

Environment

- Node: 18.0.0
- npm: 8.6.0

Anything else?

No response

[kjkent]

I'm unsure if this behaviour is related to React@18, but, if you --force the installation of @rjsf/material-ui, trying to use it results in variations of this error (differing line references and mui element references) repeatedly being logged upon starting the React development server:

WARNING in ./node_modules/@rjsf/material-ui/dist/material-ui.esm.js 1217:24-67
Module not found: Error: Can't resolve '@material-ui/core/Slider' in '<project-dir>/node_modules/@rjsf/material-ui/dist'

If this is due to something irrelevant, I'd be happy to make a new issue.

Using:

├── @mui/material@5.7.0
├── @mui/system@5.7.0
├── react@18.1.0
├── @rjsf/core@4.2.0
└── @rjsf/material-ui@4.2.0

[heath-freenome]

I'm unsure if this behaviour is related to React@18, but, if you --force the installation of @rjsf/material-ui, trying to use it results in variations of this error (differing line references and mui element references) repeatedly being logged upon starting the React development server:

WARNING in ./node_modules/@rjsf/material-ui/dist/material-ui.esm.js 1217:24-67
Module not found: Error: Can't resolve '@material-ui/core/Slider' in '<project-dir>/node_modules/@rjsf/material-ui/dist'

If this is due to something irrelevant, I'd be happy to make a new issue.

Using:

├── @mui/material@5.7.0
├── @mui/system@5.7.0
├── react@18.1.0
├── @rjsf/core@4.2.0
└── @rjsf/material-ui@4.2.0

This is a known issue... you'll want to use one of the sub-variants for @rsjf/material-ui/v4 or @rjsf/material-ui/v5

[kjkent]

@heath-freenome thank you! That's great news.

[heath-freenome]

@heath-freenome thank you! That's great news.

Be sure to check the README.md for @rjsf/material-ui

[alboo89]

I'm unsure if this behaviour is related to React@18, but, if you --force the installation of @rjsf/material-ui, trying to use it results in variations of this error (differing line references and mui element references) repeatedly being logged upon starting the React development server:

WARNING in ./node_modules/@rjsf/material-ui/dist/material-ui.esm.js 1217:24-67
Module not found: Error: Can't resolve '@material-ui/core/Slider' in '<project-dir>/node_modules/@rjsf/material-ui/dist'

If this is due to something irrelevant, I'd be happy to make a new issue.

Using:

├── @mui/material@5.7.0
├── @mui/system@5.7.0
├── react@18.1.0
├── @rjsf/core@4.2.0
└── @rjsf/material-ui@4.2.0

@heath-freenome the --force is not a solution to the problem of not supporting React 18. It would be very useful to have it working on the new version of React, since not every project can downgrade to React 17.
@kjkent I'm honestly confused about why we are discussing in this topic about things that don't concern the main problem of React 18 compatibility 😅

[alboo89]

@epicfaace I forked the rjsf repo and tried to update the @rsjf/material-ui package to support React 18. The main problem is that mui 4 (used in the @rsjf/material-ui/v4 package) carries with it React 16 || React 17 as peer dependency. If I wanted to open a pull request to allow supporting React 18, what would be the best way to solve this problem?

1. Discard the support for mui 4 and keep only @rsjf/material-ui package with mui 5 (which allows support for React 18)?

2.Split the @rsjf/material-ui release in 2 separate packages (e.g. @rsjf/material-ui-4 and @rsjf/material-ui with separated source code and package.json) so that the @rsjf/material-ui can work with react 18?

Let me know so that I can proceed :)

[StephenAtCFA]

@alboo89 is material ui version 4 even getting updates still? If not I'd just say drop it, otherwise you'll risk having to support both versions unnecessarily right?

[moimart1]

It should be cool to have @rsjf/material-ui@5.x.x that drop the support of MUI v4 and keep @rsjf/material-ui@4.x.x as is.
And yes maybe you need to support both versions

[heath-freenome]

In the upcoming v5 release (beta expected in august), material-ui and mui-5 will be broken out into separate packages. There will be many other breaking changes that will be documented

[moderndegree]

Is there any help that is needed to get React 18 supported? I'd be willing to help out if necessary.

[Jay-WKJun]

if need any help with this React 18 issue, i willing to help as well. i wanna this library with React 18

[heath-freenome]

I believe the main issue with React 18 and strict mode was fixed with this PR. Also, the 5.x release works with React 18 without the peer dependencies issue. Also you'll need to use @rjsf/mui with material-ui 5