给定绝对模块名称时，Typescript 在本地目录中查找

Question

I'm currently working on a typescript project made with the typescript template for create-react-app.

I'm trying to import react-table into my project from a component declared in src/components/Table.tsx . I have verified that react-table is installed, and that it is specifically the typed version. npm list | grep table npm list | grep table returns ├── @types/react-table@7.7.2 .

When I attempt to load the page, the error message I receive is Module not found: Can't resolve 'react-table' in/home/user/code/CompanyName/ProjectName/src/components

I may be mistaken, but this suggests to me that javascript is failing to look in node_modules for the module. What can I do to direct the compiler toward node_modules?

My tsconfig.json is in the project root and is as follows:

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

It's worth noting that the following import, which exists in a component declared in the src directory, works as expected and produces no error.:

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

Answer 1

If your npm list | grep table npm list | grep table only gives @types/react-table but not react-table , there's your problem.

You always need the actual module, eg react-table . The @types/ version merely downloads the typings for the module, assuming the module doesn't come with typings and someone took the time to add them to @types/ .