preact

preact copied to clipboard

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

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 reacts 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.