Компоненты Material-UI не найдены при разрешении модуля TypeScript - PullRequest
Новая
       27

Компоненты Material-UI не найдены при разрешении модуля TypeScript

5 голосов
/ 03 октября 2019

У меня есть проект Visual Studio 2019 (v16.3.2) React TypeScript, который включает компоненты Material-UI. Компилятор TypeScript не может разрешить какие-либо операции импорта @ material-ui, и возникают следующие ошибки, приводящие к тому, что соответствующий JavaScript не генерируется. 

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

Модуль для вышеуказанной ошибки: 

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;

tsconfig.json 

{
  "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"
  ]
}

package.json 

{
  "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"
    ]
  }
}

Я убедился, что пакеты @ material-ui установлены в папке node_modules.

enter image description here

Все остальные пакеты / импорт работают правильно. Мысли о том, почему модули material-ui не разрешаются во время компиляции TS, приветствуются.

1 Ответ

0 голосов
/ 08 октября 2019

После некоторых исследований выясняется, что для поиска файлов в подкаталогах необходимо включить раздел tsconfig include из значения по умолчанию.

По умолчанию включение включает только поиск файлов в папке src 

"include": [
  "src"
]

измененный поиск файлов в любом подкаталоге 

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

Хорошая ссылка на tsconfig.json

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

...