react-jsonschema-form: 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",

About this issue

  • Original URL
  • State: closed
  • Created 2 years ago
  • Reactions: 9
  • Comments: 62 (20 by maintainers)

Commits related to this issue

Most upvoted comments

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.

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');

There is a plan to fix this differently in the upcoming @rjsf v5 version. Stay tuned

Issues listed above from other users still persisted on version 4.1.1 I am using RJSF with MUIv5

have the same issue image@material-ui/core”: “^4.12.3”, “@material-ui/icons”: “^4.11.2”, “@rjsf/core”: “^4.1.0”, “@rjsf/material-ui”: “^4.1.0”,

I’m having the same issue using v5 and vite. When I run the project on localhost, everything works as expected. But when I build and deploy the project, I’m getting the warn.

"@emotion/react": "^11.9.0",
    "@emotion/styled": "^11.8.1",
    "@mui/icons-material": "^5.8.0",
    "@mui/material": "^5.8.1",
    "@mui/system": "^5.8.1",
    "@rjsf/core": "^4.2.0",
    "@rjsf/material-ui": "^4.2.0",

image

Another option is to have @rjsf/material-ui/4 and @rjsf/material-ui/5. wdyt @heath-freenome ?

This is breaking our builds when we are building with Vite for production.

We receive in the DOM:

WARNING: @mui/material or @mui/icons-material is not available

And in the console:

ReferenceError: require is not defined

This occurs whether we import the CommonJS distribution or the ESM distribution. Inspecting the ESM distribution’s bundled code you can see that oddly it still includes CommonJS require statements to pull in the Material-UI components individually:

// material-ui.esm.js

try {
  // core
  Box$1 = /*#__PURE__*/require('@mui/material/Box').default;
  Button$1 = /*#__PURE__*/require('@mui/material/Button').default;
  Checkbox$1 = /*#__PURE__*/require('@mui/material/Checkbox').default;
  Divider$1 = /*#__PURE__*/require('@mui/material/Divider').default;
  FormControl$1 = /*#__PURE__*/require('@mui/material/FormControl').default;
  FormControlLabel$1 = /*#__PURE__*/require('@mui/material/FormControlLabel').default;
  FormGroup$1 = /*#__PURE__*/require('@mui/material/FormGroup').default;
  FormHelperText$1 = /*#__PURE__*/require('@mui/material/FormHelperText').default;
  FormLabel$1 = /*#__PURE__*/require('@mui/material/FormLabel').default;
  Grid$1 = /*#__PURE__*/require('@mui/material/Grid').default;
  IconButton$1 = /*#__PURE__*/require('@mui/material/IconButton').default;
  Input$1 = /*#__PURE__*/require('@mui/material/OutlinedInput').default;
  InputLabel$1 = /*#__PURE__*/require('@mui/material/InputLabel').default;
  List$1 = /*#__PURE__*/require('@mui/material/List').default;
  ListItem$1 = /*#__PURE__*/require('@mui/material/ListItem').default;
  ListItemIcon$1 = /*#__PURE__*/require('@mui/material/ListItemIcon').default;
  ListItemText$1 = /*#__PURE__*/require('@mui/material/ListItemText').default;
  MenuItem$1 = /*#__PURE__*/require('@mui/material/MenuItem').default;
  Paper$1 = /*#__PURE__*/require('@mui/material/Paper').default;
  Radio$1 = /*#__PURE__*/require('@mui/material/Radio').default;
  RadioGroup$1 = /*#__PURE__*/require('@mui/material/RadioGroup').default;
  Slider$1 = /*#__PURE__*/require('@mui/material/Slider').default;
  TextField$1 = /*#__PURE__*/require('@mui/material/TextField').default;
  Typography$1 = /*#__PURE__*/require('@mui/material/Typography').default; // icons

  AddIcon$1 = /*#__PURE__*/require('@mui/icons-material/Add').default;
  ArrowDownwardIcon$1 = /*#__PURE__*/require('@mui/icons-material/ArrowDownward').default;
  ArrowUpwardIcon$1 = /*#__PURE__*/require('@mui/icons-material/ArrowUpward').default;
  ErrorIcon$1 = /*#__PURE__*/require('@mui/icons-material/Error').default;
  RemoveIcon$1 = /*#__PURE__*/require('@mui/icons-material/Remove').default;
} catch (_unused) {// no-op
}

Which is causing errors for us as they are not transformed by our build system because it does not assume CommonJS syntax to be present.

We are using Vite v2.8.0 and RJSF /core and /material-ui v4.1.1 but this issue still seems to occur for any version past v4.0.0.

Maybe the material-ui module should be splitted into three different modules? common, material v4 and material v5?

Sadly, React projects initiated with CRA cannot access to Webpack config without ejecting or editing webpack.config.js directly in node_modules.

Just a note that if anyone is coming to this page for the error Failed to resolve entry for package "@rjsf/material-ui". The package may have incorrect main/module/exports specified in its package.json. when trying to follow the contributor’s guide, it seems that it just takes a while to compile and yields that error before it compiles.

I had the same issue with a monorepo setup and the tsconfig suggested in the README wasn’t working. Tried pointing to the root node_modules folder and it worked.

{
  ...
  "compilerOptions": {
    ...
    "baseUrl": ".",
    "paths": {
      "@rjsf/material-ui/*": ["../../node_modules/@rjsf/material-ui/dist/*"]
    }
  }
}

I totally get what you guys are saying about splitting the package into v4 and v5.

I think my point is not focused on the same problem as the problem solved by splitting the package.

My project, unfortunately, has mui and material-ui installed (v4 and v5) already, so the Warning: @mui/core ... error is caused no because I don’t have it installed, but because my bundler does not support commonjs.

So even though I have both material 4 and 5 versions installed (which was one of the ways proposed to avoiding the initial problem of this issue), its gives me that warning because of the requires used on the Context files mentioned prior.

Actually splitting things WILL solve your problem because then we can switch back to imports rather than requires because we won’t need to conditionally include only one material-ui. It sounds like not having both versions is causing errors rather than the warnings that webpack generates?

I spent some more time on this issue and here is what worked for me. I followed ggmartins091 steps using patch-package, moved the imports to the beginning of the file and commented out from line 1196 - 1261. Here is my file. material-ui-v5.esm.zip .

@viniciusalvess I resolved this by replacing the requires that @ggmartins091 mentions with import statements and then updating the ESM output bundle file to be the main entry-point in the package.json main field, then republishing it as a private package on an internal private registry for use.

I already mentioned the strange use of require in the ESM bundle earlier in this issue and I see that it indeed appears to be the issue at least for building with Vite.

@ggmartins091 your issue might be that module resolution for some other part of your environment/toolchain is not set up to use the rjsf team’s workaround. See the typescript/jest configuration adjustments in the readme here: https://github.com/rjsf-team/react-jsonschema-form/blob/master/packages/material-ui/README.md#material-ui-version-5-1 - you may need to do something similar

@mulib don’t think the changes have been released yet. More to follow 🤞

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.

@heath-freenome is this something that is going to be addressed? Not sure that the webpack bundling hacks are going to work for larger projects.