Update @rjsf/material-ui import instructions on Read the Docs

[kjkent]

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

The documentation instructs users to import @rjsf/material-ui with import Form from @rjsf/material-ui. This leads to errors such as what I encountered here and similar to what is reported in #2762 before the introduction of the v4/v5 subpackages.

Expected Behavior

@heath-freenome kindly pointed me in the direction of the direction of the README.md for @rjsf/material-ui, which contains the updated and correct import instructions.

Steps To Reproduce

1. Open docs

Environment

N/A

Anything else?

No response

[epicfaace]

Thanks @kjkent , mind making a PR to update those docs?

[kjkent]

@epicfaace happily :) I'll do so this evening.

[kjkent]

@epicfaace, I haven't forgot about this, my apologies for the delay, work has been intense -- I'll make that PR shortly (within the next couple of days)

[Anushka-shukla]

Hi. I am trying to implement MUI. I went through the ReadMe as well and some issues around the same thing. But I still get the error.
Module not found: Can't resolve '@rjsf/material-ui/v5' in 'D:\Projects\JSON-Schema\json-schema-playground\my-jsonschema\src'
I have following in my package.josn
"@emotion/react": "^11.9.3",
"@emotion/styled": "^11.9.3",
"@mui/icons-material": "^5.8.3",
"@mui/material": "^5.8.3",
"@rjsf/bootstrap-4": "^4.2.0",
"@rjsf/core": "^4.2.0",
"react": "^17.0.0",
"react-dom": "^17.0.0",
Import - import Form from '@rjsf/material-ui/v5';

what am I missing, can someone help?

[ivanlewin]

Hi. I am trying to implement MUI. I went through the ReadMe as well and some issues around the same thing. But I still get the error. Module not found: Can't resolve '@rjsf/material-ui/v5' in 'D:\Projects\JSON-Schema\json-schema-playground\my-jsonschema\src' I have following in my package.josn "@emotion/react": "^11.9.3", "@emotion/styled": "^11.9.3", "@mui/icons-material": "^5.8.3", "@mui/material": "^5.8.3", "@rjsf/bootstrap-4": "^4.2.0", "@rjsf/core": "^4.2.0", "react": "^17.0.0", "react-dom": "^17.0.0", Import - import Form from '@rjsf/material-ui/v5';

what am I missing, can someone help?

@rjsf/material-ui is not installed correctly. Your package.json should look like the following:

{
        // ...
        "dependencies": {
                "@emotion/react": "^11.9.3",
                "@emotion/styled": "^11.9.3",
                "@mui/icons-material": "^5.8.3",
                "@mui/material": "^5.8.3",
                "@rjsf/bootstrap-4": "^4.2.0", // also, if you're using Mui I think you don't need the bootstrap version
                "@rjsf/core": "^4.2.0",
                "@rjsf/material-ui": "^4.2.0", // added the package here
                "react": "^17.0.0",
                "react-dom": "^17.0.0"
        }
        // ...
}

See README.md

[Anushka-shukla]

Hi @ivanlewin, I installed everything acc. to what you mentioned even then I get the error.
Attaching screenshots for your reference.

[ivanlewin]

@Anushka-shukla Try this: import { MuiForm5 as Form } from '@rjsf/material-ui';

[Anushka-shukla]

@Anushka-shukla Try this: import { MuiForm5 as Form } from '@rjsf/material-ui';
@ivanlewin It works but I get these in terminal..

Also the alt date looks weird. Is this a known issue?

[ivanlewin]

@Anushka-shukla Try this: import { MuiForm5 as Form } from '@rjsf/material-ui';
@ivanlewin It works but I get these in terminal..

I actually get these errors when using the package. I have an app with mui v4 and I get messages saying that mui v5 imports couldn't be resolved. I am waiting for an answer as well

[Anushka-shukla]

@Anushka-shukla Try this: import { MuiForm5 as Form } from '@rjsf/material-ui';
@ivanlewin It works but I get these in terminal..

I actually get these errors when using the package. I have an app with mui v4 and I get messages saying that mui v5 imports couldn't be resolved. I am waiting for an answer as well

okay..
Thanks a lot! :)

[heath-freenome]

@Anushka-shukla Try this: import { MuiForm5 as Form } from '@rjsf/material-ui';

This is not the preferred way of doing this as it will cause the issues mentioned.

[ivanlewin]

@Anushka-shukla Try this: import { MuiForm5 as Form } from '@rjsf/material-ui';

This is not the preferred way of doing this as it will cause the issues mentioned.

What would be the best way to import MuiForm4 ?

---

Update: I got my ts compiler to not complain any more;

My file tree is something like this:

my-app/
├─ node_modules/
│  ├─ @rjsf/material-ui/
│  │  ├─ dist/
│  │  │  ├─ v4.d.ts
├─ src/
│  ├─ index.ts
├─ package.json
├─ tsconfig.json

My tsconfig.json looks like this:

{
  ...
  "compilerOptions": {
    ...
    "baseUrl": "src",
    "paths": {
      "@rjsf/material-ui/*": ["../node_modules/@rjsf/material-ui/dist/*"] // -> notice the leading ".." since my baseUrl is "src" and not "."
    }
  }
}

Now I can import v4 Form correctly in index.ts like so:

import Form from "@rjsf/material-ui/v4";

Hope this helps @Anushka-shukla

[heath-freenome]

Fixed in v5 beta by separating out material-ui 5 into a new @rjsf/mui theme. See the https://react-jsonschema-form.readthedocs.io/en/latest/5.x%20upgrade%20guide/

[kjkent]

Hey @epicfaace @heath-freenome, I want to sincerely apologise for committing to contribute to the docs here and then completely disappearing -- work's been incredibly busy and I found myself having bitten off more than I could chew! Sorry again, and congrats on the constant improvements and work on rjsf and its modules, it's looking superb.