react-hint icon indicating copy to clipboard operation
react-hint copied to clipboard

Not working with Preact

Open mrbrianevans opened this issue 2 years ago • 2 comments

I am trying to use this in a Preact app, but can't get it to work.

TypeError: createRef is not a function

I have compat aliases set up in snowpack config:

alias: {
    react: 'preact/compat',
    'react-dom': 'preact/compat',
  }

and typescript paths in tsconfig.json:

"paths": {
      "react": ["node_modules/preact/compat/"],
      "react-dom": ["node_modules/preact/compat/"]
    }

I created the factory as recommended in the docs, but still get the above mentioned error.

Has anyone else successfully used react-hint with the latest version of preact? (v10.5.14 at time of writing).

Any ideas what I could do?

Many thanks, Brian

mrbrianevans avatar Oct 02 '21 17:10 mrbrianevans

@mrbrianevans Maybe you have missed the change in what parameters need to be passed to ReactHintFactory. Taken from README.md:

// Preact
import {h, Component, createRef} from 'preact'
import ReactHintFactory from 'react-hint'
const ReactHint = ReactHintFactory({createElement: h, Component, createRef})

This fixed it for me on preact v10.3.4.

JuliusHenke avatar Jan 05 '22 17:01 JuliusHenke

Unfortunately, this gives the following error in typescript.

Argument of type '{ createElement: typeof h; Component: typeof Component; createRef: <T = any>() => RefObject<T>; }' is not assignable to parameter of type 'typeof React'.
  Type '{ createElement: typeof h; Component: typeof Component; createRef: <T = any>() => RefObject<T>; }' is missing the following properties from type 'typeof React': createPortal, render, hydrate, unmountComponentAtNode, and 33 more.ts(2345)

A workaround is to use the following type cast, although it is pretty ugly.

const ReactHint = ReactHintFactory({
    createElement: h,
    Component,
    createRef
} as unknown as Parameters<typeof ReactHintFactory>[0]);

theoparis avatar Jan 09 '22 08:01 theoparis