preact: refs is missing in declaration file

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

Same problem. Any news ?

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

+1 Having the same problem with preact-router:

I ran into same problem. I’m using @types/flux, it installs @types/react to my node_modules and conflicts to preact.

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.

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.

@andrewiggins, shouldnt this issue be reopened then?

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.

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 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?