I am having this error while creating a new React project with MUI. I copied this code example from the docs which works on their live Codesandbox but not in my local. This is the full error message:

ModuleNotFoundError
Could not find module in path: 'react/jsx-runtime' relative to '/node_modules/@mui/styled-engine/StyledEngineProvider/StyledEngineProvider.js'

Below is my package.json:

{
  "title": "BasicButtons Material Demo",
  "scripts": {
    "start": "react-scripts start"
  },
  "name": "BasicButtons Material Demo",
  "main": "index.tsx",
  "devDependencies": {
    "react-scripts": "latest"
  },
  "dependencies": {
    "@emotion/react": "11.6.0",
    "@emotion/styled": "11.6.0",
    "@mui/material": "5.1.1",
    "@types/react": "16.14.21",
    "@types/react-dom": "16.9.14",
    "react": "16.12.0",
    "react-dom": "16.12.0",
    "typescript": "4.0.0-beta"
  }
}

I am having this error while creating a new React project with MUI. I copied this code example from the docs which works on their live Codesandbox but not in my local. This is the full error message:

ModuleNotFoundError
Could not find module in path: 'react/jsx-runtime' relative to '/node_modules/@mui/styled-engine/StyledEngineProvider/StyledEngineProvider.js'

Below is my package.json:

{
  "title": "BasicButtons Material Demo",
  "scripts": {
    "start": "react-scripts start"
  },
  "name": "BasicButtons Material Demo",
  "main": "index.tsx",
  "devDependencies": {
    "react-scripts": "latest"
  },
  "dependencies": {
    "@emotion/react": "11.6.0",
    "@emotion/styled": "11.6.0",
    "@mui/material": "5.1.1",
    "@types/react": "16.14.21",
    "@types/react-dom": "16.9.14",
    "react": "16.12.0",
    "react-dom": "16.12.0",
    "typescript": "4.0.0-beta"
  }
}

• javascript
• reactjs
• material-ui

• resolved in stackoverflow.com/a/76561254/6318705 – Li Zheng Commented Jun 27, 2023 at 2:27

1 Answer 1

Per docs, MUI v5 only supports React v17+:

MUI supports the most recent versions of React, starting with ^17.0.0 (the one with event delegation at the React root). Have a look at the older versions for backward compatibility.

The actual reason why this error shows up is because react/jsx-runtime module only exists in React v17. If you're stuck with v15 or v16 of React, you can update react and react-dom to the latest minor version to fix the error.

Update both packages to the latest version (17+) to fix it:

npm install react@latest react-dom@latest

If you have to use v16

npm install [email protected] [email protected]

If you have to use v15

npm install [email protected] [email protected]