在TypeScript模块解析期间找不到Material-UI组件

Question

我有一个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文件夹中。

所有其他软件包/导入均正常工作。关于为何在TS编译期间未解决material-ui模块的想法受到赞赏。

Answer 1

对我来说，只需删除所有导入声明并再次添加即可解决问题。

Answer 2

我遇到了同样的问题，我的解决方法是添加 "moduleResolution": "node"到 tsconfig.json。

Answer 3

经过一番研究后发现，需要修改 tsconfig include 部分的默认值才能在子目录中查找文件。

默认包含仅查找 src 文件夹中的文件

"include": [
  "src"
]

修改后可查找任何子目录中的文件

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

tsconfig.json 上的很好的参考

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