JSX types are augmented incorrectly when importing an instantsearch package
sachinahya opened this issue Β· comments
π Current behavior
Importing the package seems to import globally augmented versions of various types in the JSX
namespace. This has the side effect of clashing and being incorrect against the versions in @types/react
and @types/react-dom
.
This seems to have been caused by algolia/ui-components#16 which declares the augmentations inside a global
block, affecting anything that imports these packages.
π Steps to reproduce
An example is included in the CodeSandbox below - see src/App.tsx.
The Name
component has been supplied with a ref
prop, which should be a TypeScript error because Name
does not list that props in its type. However, due to the global augmentation of InstristicAttributes
, this is not an error and the @ts-expect-error
comment is incorrectly reported as unused.
Commenting out the import for react-instantsearch
correctly reports an error for the ref
prop not existing on the component.
Live reproduction
https://codesandbox.io/p/sandbox/algolia-ts-issue-43d7hp?file=/src/App.tsx
π Expected behavior
Importing any of the instantsearch or ui-components packages should not be incorrectly augmenting the types for the project they are imported into. Specifically in this case, they should not be adding a ref
prop to all JSX elements.
It now means that all of our components can appear to take a ref according to their types, leading to confusion as to which components actually do take a ref at runtime.
I believe the solution here is to declare the JSX types needed inside a .d.ts
file within the repository and include it as a reference in the tsconfig.json, so that it can exist only at build time for compilation and not at runtime where it interferes with existing declarations.
Package version
react-instantsearch 7.0.3
Operating system
macOS 13.4.1
Browser
Chrome 117.0.5938.88
Code of Conduct
- I agree to follow this project's Code of Conduct
Yesss, I also have an issue where algolia is overiding the global jsx key type:
declare global {
namespace JSX {
interface IntrinsicAttributes {
key?: string | number | null;
ref?: unknown;
}
interface ElementChildrenAttribute {
children: ComponentChildren;
}
interface Element extends VNode {
}
interface IntrinsicElements {
}
}
}
however react allows setting a bigint as a type so it fails everywhere in my app..
Types of property 'key' are incompatible.
Type 'Key | null | undefined' is not assignable to type 'string | number | null | undefined'.
Type 'bigint' is not assignable to type 'string | number | null | undefined'.ts(2322)
+1, bumping this, currently blocking me from being able to ship!
We think we have found a solution for now, if you change the built version of ui-components to be the one from this PR: algolia/ui-components#29, does it work for you all @thejessewinton, @JClackett, @sachinahya?
@Haroenv thanks, I will give it a try. When do you think this will be released?
Once it's confirmed this works as expected in some diverse environments @thejessewinton :)
@Haroenv Thanks for doing this. I built and npm linked this locally and it seems to have solved our issue.
@Haroenv same result as @sachinahya, thanks for your work on it!