'Material-UI components not found during TypeScript module resolution

I have a Visual Studio 2019 (v16.3.2) React TypeScript project which includes the Material-UI components. The TypeScript compiler can not resolve any of the @material-ui imports and errors such as the following occur causing the corresponding JavaScript not to be generated.

Error   TS2307  (TS) Cannot find module '@material-ui/core/Grid'.

The module for the error above is

import * as React from 'react';

// Material-UI
import Grid from '@material-ui/core/Grid';

// Components
import SkiWeekends from './SkiWeekends';

const EZForm: React.FC = () => {
  return (
    <React.Fragment>
      <Grid container spacing={3}>
        <Grid item xs={12}>
          <SkiWeekends/>
        </Grid>
        <Grid item xs={12}>
          A
        </Grid>
        <Grid item xs={12}>
          B
        </Grid>
        <Grid item xs={12}>
          A
        </Grid>
      </Grid>
    </React.Fragment>
  );
}

export default EZForm;

The tsconfig.json is

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "es6"
    ],
    "noImplicitAny": true,
    "noImplicitThis": true,
    "strictNullChecks": true,
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": [
    "src"
  ]
}

The package.json is

{
  "name": "msc",
  "version": "3.0.0",
  "private": true,
  "dependencies": {
    "@types/jest": "24.0.18",
    "@types/node": "12.7.9",
    "@types/react": "16.9.4",
    "@types/react-dom": "16.8.2",
    "@types/react-redux": "7.1.4",
    "@types/react-router-dom": "5.1.0",
    "@types/redux-thunk": "2.1.32",
    "@material-ui/core": "4.5.0",
    "@material-ui/icons": "4.4.3",
    "@material-ui/styles": "4.5.0",
    "react": "16.10.1",
    "react-dom": "16.10.1",
    "react-redux": "7.1.1",
    "react-router-dom": "5.1.2",
    "react-scripts": "3.1.2",
    "redux": "4.0.4",
    "redux-devtools-extension": "2.13.8",
    "redux-thunk": "2.3.0",
    "typescript": "3.6.3"
  },
  "scripts": {
    "start": "rimraf ./build && react-scripts start",
    "build": "react-scripts build",
    "test": "cross-env CI=true react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "lint": "eslint ./src/"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

I have verified the @material-ui packages are installed in the node_modules folder.

All other packages/imports work correctly. Thoughts on why the material-ui modules are not being resolved during TS compilation appreciated.

Solution 1:^[1]

I faced the same problem and my fix was to add "moduleResolution": "node" to tsconfig.json.

Solution 2:^[2]

For me the problem was fixed by simply removing all the import declarations and adding them again.

Solution 3:^[3]

After some research it turns out the tsconfig include section needs to be modified from the default value to find files in subdirectories.

Default include only finds files in the src folder

"include": [
  "src"
]

modified finds files in any subdirectory

"include": [
  "src/**/*"
]

Good reference on tsconfig.json

https://www.typescriptlang.org/docs/handbook/tsconfig-json.html

Solution 4:^[4]

For me the problem solved by running npm install / yarn install

Solution 5:^[5]

For me the problem was solved by running yarn add @material-ui/data-grid And I don't see the @material-ui/data-grid package in your package.json so I think that is missing

Solution 6:^[6]

Fixed it by importing @mui/material. The name was changed some time back.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	Devorein
Solution 3	ChrisP
Solution 4	Himanshu Jain
Solution 5	Annon
Solution 6	Shreehari

'Material-UI components not found during TypeScript module resolution

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]