Material-UI components not found during TypeScript module resolution

Question

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.

Answer 1

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

Answer 2

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

Answer 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

Answer 4

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