[SOLVED] "Could not find a declaration file for module '@handsontable/react'" even though "d.ts" file exists

"Could not find a declaration file for module '@handsontable/react'" even though "d.ts" file exists

I'm starting a new project with vite+react+ts+swc with below command following vite document.

npm create vite@latest -- --template react-swc-ts

And, I installed handsontable library with below command. (It also written in handsontable document.)

npm install --save handsontable @handsontable/react

However, When I try to use handsontable in my App.tsx file, It occurs two typescript errors.

// App.tsx
import { HotTable } from '@handsontable/react';
import { registerAllModules } from 'handsontable/registry';

src/App.tsx:6:26 - error TS7016: Could not find a declaration file for module '@handsontable/react'. '.../node_modules/@handsontable/react/es/react-handsontable.mjs' implicitly has an 'any' type.
  There are types at '.../node_modules/@handsontable/react/index.d.ts', but this result could not be resolved when respecting package.json "exports". The '@handsontable/react' library may need to update its package.json or typings.


src/App.tsx:7:36 - error TS7016: Could not find a declaration file for module 'handsontable/registry'. '.../node_modules/handsontable/registry.mjs' implicitly has an 'any' type.
  There are types at '.../node_modules/handsontable/registry.d.ts', but this result could not be resolved when respecting package.json "exports". The 'handsontable' library may need to update its package.json or typings.

Here is my tsconfig.json. (created by vite template)

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

And I think there is no problem with handsontable library because it has index.d.ts normally.

Solution