Not finding types in react + typescript + vite environment

[shinpanda]

I installed the library using npm and created a table, but when I imported it, the following error occurred.

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.

I did a search and found that writing the following to the package.json file for that library in the node_modules folder will find the type just fine, but it's not a viable alternative since it's only available locally. Let me know if there's another way I can share the project and work around this temporarily.

"exports": {
    ".": {
      "import": {
        "types": "./index.d.ts",
        "default": "./es/react-handsontable.mjs"
      },
        
      "require": {
        "types": "./index.d.ts",
        "default": "./commonjs/react-handsontable.js"
      }
    }
  },

Below are my tsconfig.json options.

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

[adrianszymanski89]

Hi @shinpanda

Thank you for contacting us. I have a few questions. Can you tell me what version of Handsontable, NPM, and Node.js you use?

[shinpanda]

I've created a new project to show you.
I see that the newly created project has the same type error.

link is: https://github.com/shinpanda/sample-projects

[adrianszymanski89]

Thank you for this. I will check it locally and get back to you tomorrow.

[adrianszymanski89]

Hi @shinpanda

I checked the code, and for now, I can propose a workaround that isn't the greatest solution but will work and will let you share the project without getting errors.

In your vite-env.d.ts file, you have to add this line:

declare module "*";

Then you will also need to add this line to your .gitignore config:

!vite-env.d.ts

This is the best temporary solution I can propose for now. I will report this issue internally for further investigation.

Let me know if that solution is acceptable to you.

[shinpanda]

I apologize for the late reply, when I used that method, it imported fine, but there was an issue in the code that prevented me from using it. The method you described results in the following error.
The 'HotTable' namespace is not available as a format.ts(2709)
We are working on a fix in the node_modules folder. We hope this will resolve the issue. Thank you.

[AMBudnik]

@shinpanda Please feel free to contact us at support@handsontable.com if the planned solution does not yield the desired outcome. We are here to assist you and provide any necessary support.

[mass2527]

@shinpanda @AMBudnik
You guys can try this one to fix that issue temporarily.

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
-    "moduleResolution": "bundler",
+    "moduleResolution": "Node",
+    "esModuleInterop": true,
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

[youhogeon]

"Temporary" Solution while waiting for a patch

#10448

[youhogeon]

Is this problem solved in 13.1.0?
I could not found anything regards to this issue in release note.

[adrianszymanski89]

Hi @youhogeon

It isn't fixed yet; we will update this issue once it's done.

[adrianszymanski89]

Hi @youhogeon @shinpanda

Recently, we released Handsontable 14.0, where we addressed some TS issues. I rechecked this issue, and it seems no longer present. Please check it on your side and confirm if the problem is gone.

[adrianszymanski89]

I'm closing this topic as the issue was solved.

[youhogeon]

Thank you for your continued feedback. I am thankfully using the recent version. happy new year

[vhaine-tb]

If you use it without the Node module resolution ("moduleResolution": "Node"), no types from handsontable are found (and no TS type are found as well):

Like these:

import Core from 'handsontable/core';
import { DetailedSettings } from 'handsontable/plugins/formulas';
import type { CellProperties, CellSettings } from 'handsontable/settings';

[adrianszymanski89]

Hi @vhaine-tb

Thank you for your input. We'll talk about it internally, and I'll let you know when I have more information.