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
- Import form for MUI version 5.
- 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
- Fixed (#2762) by introducing sub-packages that are restricted to each theme - Updated the `CHANGELOG.md` file for this fix - In the `material-ui` package - Updated the `README.md` to document the ne... — committed to heath-freenome/react-jsonschema-form by heath-freenome 2 years ago
- Fix (#2762) by introducing sub-packages that are restricted to each material-ui version (#2840) * Fixed (#2762) by introducing sub-packages that are restricted to each theme - Updated the `CHANGELOG... — committed to rjsf-team/react-jsonschema-form by heath-freenome 2 years ago
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:Add the following in your
webpack.config.js
to eliminate the errors for Material-UI v4 when you are only using v5:Webpack 4
Add the following in your
webpack.config.js
to eliminate the errors for Material-UI v5 when you are only using v4:Add the following in your
webpack.config.js
to eliminate the errors for Material-UI v4 when you are only using v5: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
“@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.
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:
And in the console:
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: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?
@heath-freenome are there ways we can change the
require
imports in https://github.com/rjsf-team/react-jsonschema-form/blob/master/packages/material-ui/src/Theme5/Mui5Context.tsx and https://github.com/rjsf-team/react-jsonschema-form/blob/master/packages/material-ui/src/Theme/MaterialUIContext.tsx so that they don’t give the errors by default? For example, see:This might also be a solution – using
__webpack_is_included__
– https://github.com/webpack/webpack/issues/8838#issuecomment-468188115 ???Sadly, React projects initiated with CRA cannot access to Webpack config without ejecting or editing
webpack.config.js
directly innode_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.
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
require
s that @ggmartins091 mentions withimport
statements and then updating the ESM output bundle file to be the main entry-point in thepackage.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 🤞
Also could we potentially do something with
imports
/exports
? https://github.com/panva/jose/blob/main/package.json#L56-L87https://nodejs.org/api/packages.html#subpath-imports
@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.