Calcite Design System with React and TypeScript

516
7
Jump to solution
06-17-2021 06:50 AM
esride-nik
New Contributor II

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'."


esridenik_1-1623936982005.png

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? 

 

 

 

Tags (3)
0 Kudos
1 Solution

Accepted Solutions
esride-nik
New Contributor II

Hi @JuliePowell,

I found a Github issue about @paulcpederson implementing this for Preact and it turns out, my problem was solved a week ago, yay :party_popper:
This is the link: https://github.com/Esri/calcite-components/issues/2336

Thanks!

View solution in original post

0 Kudos
7 Replies
JuliePowell
Esri Contributor

Hi Nik,

I will try and get you some help; I don't know the answer to this one. Stay tuned...

Julie

esride-nik
New Contributor II

Hi @JuliePowell,

I found a Github issue about @paulcpederson implementing this for Preact and it turns out, my problem was solved a week ago, yay :party_popper:
This is the link: https://github.com/Esri/calcite-components/issues/2336

Thanks!

View solution in original post

0 Kudos
JaniYlikorpi
New Contributor

ESRI documentation in this matter, as always on every matter, is absolute garbage. For the life of me I can't even Loader to work with React, Typesript and this new component system to work. I have followed everything to the letter but when I try to import the loader (import CalciteLoader  from bla bla lba calcite-components-react") I just get some bs like this:

Property '"label"' is missing in type '{ text: string; }' but required in type 'CalciteLoader'.  TS2741

 

0 Kudos
esride-nik
New Contributor II

That's a bit harsh, I would say. The JSAPI documentation for example does a pretty good job. For this Beta product there is room for improvement though.
Please take a look here. You don't need the loader. There's a new separate package for this.

0 Kudos
JaniYlikorpi
New Contributor

I was trying to use the calcite-components-react. I was not trying to use loader as in component loader. I was trying to use Loader animation component as in CaliciteLoader (formelly known simply as Loader). I was using the Loader which was the "previous version" of the component but it started to fail (animation stuck inside some other components) and I was trying to "upgrade" but didn't want to fight with this new one and decided to go with MUI because I wasn't using Calicite for anything else anyway... So again, not the component loader - the loader animation web component

0 Kudos
esride-nik
New Contributor II

Oh I see. Sorry to hear that. Quick test: 

 

<CalciteLoader active text="loading" label="labelling"></CalciteLoader>

 

works for me.
But I don't know, maybe in your case, something's not right when the components are deeply nested..? So if you think you've found a bug you might be able to help the devs by filing an issue on GitHub.  After all, it's a Beta product and I'm hoping for a stable UI lib in the end that better integrates with the look & feel of the default JSAPI widgets.
JaniYlikorpi
New Contributor

Not quite sure but I don't believe documentation mentioned label been mandatory prop. But maybe next time I'll get it to work. Thanks

0 Kudos