Open ccpu opened 6 years ago
What is the reason for using both type definitions at the same time?
we are using Lerna for creating an application with multiple packages, most of the packages are using react, and we are going to migrate them to Preact, they all using same 'node_modules' and that's why it confuses the compiler.
also to mention that it is not necessary to fix this problem, as we will eventually migrate to preact. but what would be a reason for not having the 'refs' in declaration file?
I stumbled into the same problem using preact
and react-redux
. connect
from react-redux
uses react
s type definitions and expects my component to have refs
.
Is downgrading to some non-latest version of react-redux an option?
I ran into exactly same problem. I'm not using \@types/react. I could compile but VS code says it's error. @Cyrus-d 's solution helped me.
I ran into same problem. I'm using @types/flux, it installs @types/react to my node_modules and conflicts to preact.
I ran into same problem. I'm using @types/react-beautiful-dnd and @types/react-redux, it installs @types/react.
I think @developit should reopen this issue
For reference, installing storybook types will also install React types and confuse the compiler. If you're using Babel 7 you should switch to the TypeScript Babel plugin which simply doesn't check for types on build, or do without Storybook types.
@developit would you accept a fix for this? It'd be nice to hear... something from you, since this is affecting so many TypeScript users.
Here's what you get when you 'intermingle' Preact-typed and React-typed components.
Any updates on this?
Yeah having the same issue
What version of Preact are you using? On master I'm seeing all references to the ref
property marked as optional which I think would fix this issue.
Hit this too. @andrewiggins it's complaining about refs
(plural) which doesn't exist in preact's type file
Oh! refs
with an s
! 🤦♂️ My mistake - thanks for guiding me through that lol.
I see. This is referring to the legacy string refs feature that Preact 10 doesn't have built in support for. Need to dig more into this and see what we can do.
@andrewiggins, shouldnt this issue be reopened then?
Can someone help me with a minimal repo? Or perhaps modify my attempt to reproduce the error? I tried to get one here with react-redux but TypeScript didn't throw any errors: https://gist.github.com/andrewiggins/f16d86f60a98a4f58b5a0facb64b3f74 I'm sure I'm missing something simple....
Do be sure to share your source, package.json, and tsconfig file.
@andrewiggins New to using gists, but I've reproduced the problem using your gist as a starting point. I was seeing the "refs" issue when implementing the dropdownRender
property of antd's Select
component. https://gist.github.com/mellis481/517fb15b186b1d5d3aa494ce0f453517
You should see the issue on line 38.
CC: @marvinhagemeister
Also experiencing this issue- in my case there is a Property 'refs' is missing
error when I try to use Enzyme to shallow
or mount
render any component, which I would expect would be a fairly common use case.
Same problem. Any news ?
Started having this problem after adding https://github.com/uber/baseweb ans https://github.com/styletron/styletron to my project. Any news?
+1 Having the same problem with preact-router
:
Can someone help me with a minimal repo? Or perhaps modify my attempt to reproduce the error? I tried to get one here with react-redux but TypeScript didn't throw any errors: https://gist.github.com/andrewiggins/f16d86f60a98a4f58b5a0facb64b3f74 I'm sure I'm missing something simple....
Do be sure to share your source, package.json, and tsconfig file.
Well, I don't have a minimal repo, but I have the issue in my repository.
Ping yarn start
to see the following errors.
ERROR in /home/homk/prg/snowinmars/aristotle.paraphrase/src/fe/src/components/App/App.tsx(28,8):
TS2786: 'Suspense' cannot be used as a JSX component.
Its instance type 'Suspense' is not a valid JSX element.
Property 'refs' is missing in type 'Suspense' but required in type 'ElementClass'.
ERROR in /home/homk/prg/snowinmars/aristotle.paraphrase/src/fe/src/components/App/App.tsx(29,10):
TS2786: 'Router' cannot be used as a JSX component.
Its instance type 'Router' is not a valid JSX element.
Property 'refs' is missing in type 'Router' but required in type 'ElementClass'.
Version: typescript 4.5.5
And it goes with runtime js error: Cannot read properties of undefined (reading 'replace') at at d (preact-router.module.js:1)
on function function d(n){return n.replace(/(^\/+|\/+$)/g,"").split("/")}
I made a workaround by using react-router
and non-lazy imports. For some reasons, if I import components with lazy()
, it cause a runtime error.
Same issue here :(
Same.
preact + preact-rotuter + theme-ui
A potential workaround for this:
preact.d.ts
namespace preact {
interface Component {
// This is a workaround for https://github.com/preactjs/preact/issues/1206
refs: Record<string, any>;
}
}
declare module "preact" {
export = preact;
}
I was having this issue with Fragment, and adding this to preact.d.ts workfed for me:
export type Fragment = preact.JSX.Element
A potential workaround for this:
preact.d.ts
namespace preact { interface Component { // This is a workaround for https://github.com/preactjs/preact/issues/1206 refs: Record<string, any>; } } declare module "preact" { export = preact; }
No, use this:
global.d.ts
export {};
declare global {
namespace preact {
interface Component {
// This is a workaround for https://github.com/preactjs/preact/issues/1206
refs: Record<string, any>;
}
}
}
The method above will override all typings..
A good minimal examples for this problem is the typescript example in the enzyme-adapter-preact-pure module. It builds and runs fine in a terminal, but fails to do so in VS Code.
Side note: the file structure in preact has changed meanwhile and the simplest workaround I found was to add a ref definition in the Component
interface in node_modules/preact/src/index.d.ts
componentDidCatch?(error: any, errorInfo: ErrorInfo): void;
refs: { [key: string]: Component<any> | Element; };
@developit Another reason for mixing the types is when using a library (like enzyme
) which was originally written for React.
I have noticed that having both preact and react types (@types/react) will confuse the typescript compiler and throw the following error:
'Property 'refs' is missing in type 'component'.'
apparently, the property 'refs' is missing from the 'preact.d.ts' declaration file.
adding the following code after line 101 in 'preact.d.ts' will solve the problem:
refs: { [key: string]: Component<any> | Element; };
tried to submit a PR, but couldn't find the file mentioned.
Thanks