Property 'key' does not exist on type 'IntrinsicAttributes & ...

[bgorven]

l ran into an issue where setting a 'key' property on a jsx element caused a type error. This appears to happen when using twin.macro with Vite https://stackoverflow.com/questions/78589183/error-when-trying-to-set-key-for-custom-component

The fix in the above post did make the 'key' error go away, but then as stopped working so l investigated further. l believe what's happening is that the twin.d.ts file has an import at the top, which makes it a local file or module rather than an ambient or global declaration, so the interface in the declare global block is not merged with other global declarations. https://basarat.gitbook.io/typescript/project/modules

In general, there are two ways that l know of to work around this:

• you can import types into a .d.ts using the import() function rather than top-level imports, i.e. type CSSProp = import('styled-components').CSSProp or even { css?: import('styled-components').CSSProp, tw?: string }, but l couldn't make that work in this case because l wasn't able to import the styledImport and cssImport functions.
• you can put the global definitions into a separate 'global.d.ts' file that doesn't have top-level imports. If l'm reading this right it appears that this is a best practise https://basarat.gitbook.io/typescript/type-system/lib.d.ts#modifying-native-types

l used the second option and that seems to have fixed the issue for me; just sharing this here in case anyone else runs into the same problem.