Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

enter image description here

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

like image 812
ChrisP Avatar asked Oct 02 '19 22:10

ChrisP


4 Answers

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

like image 120
Devorein Avatar answered Nov 19 '22 13:11

Devorein


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

like image 9
Denis Avatar answered Nov 19 '22 13:11

Denis


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

like image 3
ChrisP Avatar answered Nov 19 '22 14:11

ChrisP


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

like image 1
Himanshu Jain Avatar answered Nov 19 '22 14:11

Himanshu Jain