Module not found: Error: Can't resolve '@material-ui/core' and '@material-ui/icons'

Description

When I use rjsf out-of-the-box, right after installation I get some unnecessary warnings in the console.

Steps to Reproduce

1. Import form for MUI version 5.
2. Observe warnings in the console.

Expected behavior

No warnings.

Actual behavior

I use rjsf as follows with Material UI version 5.

import { MuiForm5 as Form } from '@rjsf/material-ui';
  <Form schema={schema}>
    <></>
  </Form>

That gives me the following warning in the console:

WARNING in ../../node_modules/@rjsf/material-ui/dist/material-ui.esm.js 1139:21-49
Module not found: Error: Can't resolve '@material-ui/core' in '/... ... .../node_modules/@rjsf/material-ui/dist'
...
WARNING in ../../node_modules/@rjsf/material-ui/dist/material-ui.esm.js 1140:23-52
Module not found: Error: Can't resolve '@material-ui/icons' in '/... ... .../node_modules/@rjsf/material-ui/dist'

Version

From package.json:

    "@emotion/react": "^11.7.1",
    "@emotion/styled": "^11.6.0",
    "@mui/icons-material": "^5.4.4",
    "@mui/material": "^5.3.1",
    "@rjsf/core": "^4.1.0",
    "@rjsf/material-ui": "^4.1.0",

[epicfaace]

I’m checking with some other library authors to see if there are other, more recommended ways, to include optional dependencies that avoid these problems.

Otherwise, we will just have to split @rjsf/material-ui into two libraries.

[heath-freenome]

This is a known issue with the way Mui 4 and 5 support were built to be side-by-side. There are webpack tricks that can be used to eliminate the warnings.

Webpack 5

Add the following in your webpack.config.js to eliminate the errors for Material-UI v5 when you are only using v4:

// Have webpack 5 set the fallbacks for the resolver for Mui 5 to be false
config.resolve.fallback = { '@mui/material': false, '@mui/icons-material': false };

Add the following in your webpack.config.js to eliminate the errors for Material-UI v4 when you are only using v5:

// Have webpack 5 set the fallbacks for the resolver for Mui 4 to be false
config.resolve.fallback = { '@material-ui/core': false, '@material-ui/icons': false };

Webpack 4

Add the following in your webpack.config.js to eliminate the errors for Material-UI v5 when you are only using v4:

// Alias Material-ui 5 to be Material-ui 4
config.resolve.alias['@mui/material'] = require.resolve('@material-ui/core');
config.resolve.alias['@mui/icons-material'] = require.resolve('@material-ui/icons');

Add the following in your webpack.config.js to eliminate the errors for Material-UI v4 when you are only using v5:

// Alias Material-ui 4 to be Material-ui 5
config.resolve.alias['@material-ui/core'] = require.resolve('@mui/material');
config.resolve.alias['@material-ui/icons'] = require.resolve('@mui/icons-material');