feathericons / feathericons/react-feather
please remove redundant /// <reference types="react" /> (breaks preact)
- Dominant language
- JavaScript
- Stars
- 2k
- Forks
- 124
- PR merge metrics
- No merged PRs in 30d
Description
Hi! 👋
Firstly, thanks for your work on this project! 🙂
Today I used [patch-package](https://github.com/ds300/patch-package) to patch `react-feather@2.0.10` for the project I'm working on.
Here is the diff that solved my problem:
```diff
diff --git a/node_modules/react-feather/dist/index.d.ts b/node_modules/react-feather/dist/index.d.ts
index 04886e1..9ef619b 100644
--- a/node_modules/react-feather/dist/index.d.ts
+++ b/node_modules/react-feather/dist/index.d.ts
@@ -1,4 +1,3 @@
-///
import { FC, SVGAttributes } from 'react';
export interface IconProps extends SVGAttributes {
```
This issue body was [partially generated by patch-package](https://github.com/ds300/patch-package/issues/296).
## Reasoning:
That directive force-includes the full `@types/react` package into the TypeScript program's global type set. If a project aliases `react` to
`preact/compat` (in tsconfig `paths`), pulling in the real React global types clashes with the preact/compat JSX runtime under `exactOptionalPropertyTypes`.
The directive is redundant (I think): the `import { FC, SVGAttributes } from 'react'` on the next line already resolves to preact/compat through the path alias, which provides both types.
### Reproducer:
```jsx
import * as React from "preact";
import {Upload} from "react-feather";
export function F() {
return
}
```
Error message:
```
'Upload' cannot be used as a JSX component.
Its type 'Icon' is not a valid JSX element type.
Type 'FunctionComponent' is not assignable to type 'FunctionComponent' with 'exactOptionalPropertyTypes: true'. Consider adding 'undefined' to the types of the target's properties.
Types of property 'displayName' are incompatible.
Type 'string | undefined' is not assignable to type 'string'.
Type 'undefined' is not assignable to type 'string'.
```
Playground link: https://www.typescriptlang.org/play/?noUncheckedIndexedAccess=true&exactOptionalPropertyTypes=true&suppressImplicitAnyIndexErrors=true#code/JYWwDg9gTgLgBAKjgQwM5wEoFNkGN4BmUEIcARGFDvmQNwBQokscA3gKpgA2EyAJgF84REuSp4YAWgI4YACyxQ69elgAezQgFcAdvmAQdcAGIAKAJRt6cG3CowtUIwB5OPfnFTAAXlgC8rABsACxCyFDAyJJywHx8WDp+ZDBQWlhkAPQAfPQCQA
Contributor guide
No contributing guide indexed for this repository
Research direction
Start with the published declaration at node_modules/react-feather/dist/index.d.ts and compare it with the package source or build entry that generates it. Use the provided Preact alias reproducer with exactOptionalPropertyTypes enabled; done means the published declarations no longer force React's reference types and the reproducer type-checks without the JSX component error.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 75/100