Can't resolve 'react/jsx-runtime' in mui, react 18

Question

Can't resolve 'react/jsx-runtime' in mui packages for react version 18.2.0 and mui version 5.9.3 when I start application via yarn start I start the application vi cross-env

cross-env NODE_ENV=development webpack serve --config webpack.dev.config.js --progress

I'm using React.FC:

import { Select } from "@mui/material";
import MenuItem from "@mui/material/MenuItem";
import React from "react";
const products = [
    "123",
    "234,
    "345",
    "567",
    "678",
  ];
export const App: React.FC = () => {
  return (
    <>
      <Select
        value={"value"}
        onChange={() => console.log("React")}
        label="ProductId"
      >
        { products.map((product, index) => {
          return (
            <MenuItem key={index} value={product}>
              {product}
            </MenuItem>
          );
        })}
      </Select>
    </>
  );
};

export default App;

I have package.json:

...
    "@emotion/react": "^11.10.0",
    "@emotion/styled": "^11.10.0",
    "@mui/icons-material": "^5.8.4",
    "@mui/material": "^5.9.3",
     "react": "^18.2.0",
    "react-device-detect": "^2.1.2",
    "react-dom": "^18.2.0",
    "react-hot-loader": "^4.13.0",
    "react-jss": "^10.9.0"
...

I have tsconfig.json:

 "include": ["src", "tests"],
  "exclude": ["**/node_modules"],
  "compilerOptions": {
    "resolveJsonModule": true,
    "rootDir": "./src",
    "sourceRoot": "./src",
    "declaration": false,
    "types": ["jest", "node"],
    "allowSyntheticDefaultImports": true,
    "emitDecoratorMetadata": false,
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "noFallthroughCasesInSwitch": true,
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noUnusedLocals": true,
    "noImplicitOverride": true,
    "noUnusedParameters": true,
    "pretty": true,
    "removeComments": true,
    "sourceMap": true,
    "strictNullChecks": true,
    "stripInternal": true,
    "target": "esnext",
    "jsx": "react-jsx",
    "lib": ["esnext", "dom"],
    "strict": true

I've got an error:

Module not found: Error: Can't resolve 'react/jsx-runtime' in '/Users/igracheva/dpa-ui/app/node_modules/@mui/material/Select'

My react js doesn't start properly. It wrotes an error "Can't resolve 'react/jsx-runtime'"

Are you using Create React app ? https://reactjs.org/docs/create-a-new-react-app.html#create-react-app if no consider it. Did you run ```yarn``` before ```yarn start``` ? — Емил Цоков, Aug 02 '22 at 09:23
I'm using an existing app. Create a new react app is just a framework to create the app. I can create the project without create react. I'm using npm instead of yarn yet — Ирина Грачева, Aug 03 '22 at 07:18
Can you provide code sandbox with your app? Also check answers here for some ideas. https://stackoverflow.com/questions/65527359/got-cant-resolve-react-jsx-runtime-error-while-use-try-to-create-the-shared-c — Емил Цоков, Aug 04 '22 at 11:58

Can't resolve 'react/jsx-runtime' in mui, react 18

0 Answers0