给定绝对模块名称时在本地目录中查找的打字稿

Question

我目前正在使用 create-react-app 的 typescript 模板制作一个 typescript 项目。

我正在尝试从 src/components/Table.tsx 中声明的组件将 react-table 导入到我的项目中。我已验证 react-table 已安装，并且它是特定类型的版本。 npm list | grep table returns ├── @types/react-table@7.7.2.

当我尝试加载页面时，我收到的错误消息是 Module not found: Can't resolve 'react-table' in/home/user/code/CompanyName/ProjectName/src/components

我可能弄错了，但这表明 javascript 未能在 node_modules 中查找模块。我该怎么做才能将编译器指向 node_modules?

我的tsconfig.json在项目根目录下，如下：

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

值得注意的是，存在于 src 目录中声明的组件中的以下导入按预期工作并且不会产生错误。:

import {
  BrowserRouter as Router,
  Switch,
  Route,
} from "react-router-dom";

Answer 1

如果您的 npm list | grep table 仅给出 @types/react-table 而不是 react-table，那就是您的问题。

您总是需要实际的模块，例如react-table。 @types/ 版本仅下载模块的类型，假设模块不附带类型并且有人花时间将它们添加到 @types/.

给定绝对模块名称时在本地目录中查找的打字稿

Typescript looking in local directory when given an absolute module name

javascript

typescript

reactjs

react-table