4

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'"

Improve this question
5
  • Are you using Create React app ? reactjs.org/docs/create-a-new-react-app.html#create-react-app if no consider it. Did you run yarn before yarn start ? Commented Aug 2, 2022 at 9: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 Commented Aug 3, 2022 at 7:18
  • ok then did you run npm install successfully first ? Commented Aug 3, 2022 at 12:09
  • Yeas I've run npm install successfully first Commented Aug 4, 2022 at 7:52
  • Can you provide code sandbox with your app? Also check answers here for some ideas. stackoverflow.com/questions/65527359/… Commented Aug 4, 2022 at 11:58
Related questions
22
Could not find a declaration file for module 'react/jsx-runtime'
1
MUI v5: Can't resolve '@emotion/react' in '...\node_modules\@mui\styled-engine'
56
Module not found: Can't resolve '@mui/material/utils' : (v5, which included a name change.)
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

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