Dear community,
I've been struggling to integrate Calcite Design System in a React project with TypeScript. I followed the instructions, "calcite-components" is imported in my entry file, as well as the CSS and the components are working, but I don't get any typings. I see red squiggly lines in VS Code all over the place and the error message says "Property 'calcite-<element>' does not exist on type 'JSX.IntrinsicElements'."
Things I tried (with no success):
- adding "components.d.ts" under tsconfig "files", as described for "preact.d.ts" in the instructions for "Preact with TypeScript"
- adding the "calcite-components/dist/types/" directory under tsconfig "typeRoots"
- adding "components.d.ts" as reference path (error msg: use import instead of triple slash) and/or reference types (msg: "Cannot find type definition file") in my React component
- messing with the imports, e.g. trying to somehow import the exported stuff from "components.d.ts" (like the namespace "Components" and trying to do something with the interfaces in it or somehow getting a grip on the exported "LocalJSX as JSX")
- ...
My basic understanding is that there's a mapping from the calcite tags to the interfaces. The same thing btw happens in "preact.d.ts", as far as I can see. But somehow, in my React project, TypeScript doesn't see the JSX tags from "components.d.ts".
And then there's Stencil underneath, and I found an issue related to what I see: https://github.com/ionic-team/stencil/issues/1090. Tried the suggested fixes, but no luck.
Final notice: My calcite components are working, but I can only connect the events by dom. Is that intended?
Cheers
Nik
@JuliePowell Do you know someone who can help?
Accepted Solutions
