2

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"
  }
}
1

1 Answer 1

16

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]
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.