Error: Can't resolve 'react/jsx-runtime' in '/app/node_modules/@mui/system/esm/RtlProvider'

[cuttingd]

I work on a create-react-app application and getting the following error when running react-scripts build:

Module not found: Error: Can't resolve 'react/jsx-runtime' in '/app/node_modules/@mui/system/esm/RtlProvider'
Did you mean 'jsx-runtime.js'?
BREAKING CHANGE: The request 'react/jsx-runtime' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

react and react-dom are version is 17.0.2

These are the mui package versions I'm using:

"@mui/icons-material": "^6.5.0",
"@mui/material": "^6.5.0",
"@mui/styles": "^6.4.8",
"@mui/x-charts-pro": "^7.29.1",
"@mui/x-data-grid-pro": "^7.29.8",
"@mui/x-date-pickers-pro": "^7.29.4",

I can't upgrade material at this time because I'm in the process of migrating from dx-react-grid to x-data-grid and the dx-react-grid fails to compile with anything new than 6.x. This is also the reason I can't upgrade past react 17. Once I migrate all of our grids to x-data-grid I'll be able to bump those versions up.

Search keywords:

[cuttingd]

I will add that this is only happening when I execute npm run build from inside a docker image. It is a docker image based on RHEL with node 22 installed

[DiegoAndai]

Hey @cuttingd, thanks for the report! Could you provide a minimal reproduction? This would help a lot. A live example would be perfect. This StackBlitz sandbox template may be a good starting point. Thank you!

[cuttingd]

Unfortunately I've not been able to recreate it with a small app. Our app is fairly large with a lot of mui components and it only occurs when I run npm run build inside of a docker container with our app.

[Sakshamb24]

Hi — I’d like to work on this. I will open a PR soon.

[cuttingd]

I was able to reproduce this. I've create a repo at https://github.com/cuttingd/mui-issue-46689. If you download that and run npm install && npm run build you should see the issue.

[cuttingd]

I've determined that it's the LocalizationProvider component that's causing this issue. Removing that from App.js removes the failure. When I dowgrade x-date-pickers-pro to v6.x and material to v5.x the error also goes away. Making this change in our app also resolved the error. So if x-date-pickers-pro is upgraded to v7.x, it seems to require material v6 but that combination causes this issue. We need to have x-date-pickers-pro v7x in order to get the DateTimeRangePicker as it's not implemented in v6.