How to use the Polyfill with typescript?

[JanStevens]

Hello,

I'm trying to use the polyfill with typescript, but I get the following errors which seems to me that the polyfill doesn't have a typescript declaration file.

TypeScript error in Reader.tsx(2,33):
Could not find a declaration file for module 'react-resize-detector/build/withPolyfill'. '/node_modules/react-resize-detector/build/withPolyfill.js' implicitly has an 'any' type.
  Try `npm install @types/react-resize-detector` if it exists or add a new declaration (.d.ts) file containing `declare module 'react-resize-detector/build/withPolyfill';`  TS7016

    1 | import React, { useCallback, useMemo, useState } from 'react';
  > 2 | import ReactResizeDetector from 'react-resize-detector/build/withPolyfill';
      |                                 ^
    3 | 

Could also https://github.com/maslianok/react-resize-detector/pull/137 be merged and released? Thanks!

[johnhunter]

This is a blocker to us bumping to v6.x.x

[mishkamishka47]

You should be able to re-export the types you need with your own custom types declaration file:

// types.d.ts

declare module 'react-resize-detector/build/withPolyfill' {
  export * from 'react-resize-detector'
}

Make sure you don't export declare global anywhere in the file, or it won't work.

[JanStevens]

Hi,

I tried it but still doesn't work.

// declarations/react-size-detector-polyfill.d.ts
declare module 'react-resize-detector/build/withPolyfill' {
  export * from 'react-resize-detector';
}

My tsconfig.json has in the include property declarations

{
  "compilerOptions": {
    // typical CRA options
  },
  "include": [
    "src",
    "declarations",
    "src/setupTests.ts"
  ]
}

Restarted dev server, cleared out node modules cache and so on, I get the following errors

import ReactResizeDetector from 'react-resize-detector/build/withPolyfill';

JSX element type 'ReactResizeDetector' does not have any construct or call signatures.
  > 109 |       <ReactResizeDetector refreshMode="throttle" refreshRate={25} handleWidth handleHeight>
        |        ^

[khmm12]

You should explicitly re-export the default export (MDN).

declare module 'react-resize-detector/build/withPolyfill' {
  export { default } from 'react-resize-detector'
  export * from 'react-resize-detector'
}

But IMO the easiest and right way in such cases is aliases.

E.g. webpack:

module.exports = {
  resolve: {
    alias: {
      'react-resize-detector': 'react-resize-detector/build/withPolyfill'
    }
  }
}

[maslianok]

What is the best way to fix it?

Look at the screenshot below:

I have index.js <-> index.d.ts that are autogenerated from the source code. Now I want to link withPolyfill.js <-> index.d.ts

The easiest way is to just copy index.d.ts and rename to withPolyfill.d.ts, but I'm not sure this is a good way to resolve the problem :)

[maslianok]

Please, try v6.6.1.

It should work now

[JanStevens]

Hi,

I'm using latest v6.6.1 and indeed the typings now work! I do have another issue (might be related) when using the hooks and react 17 (not sure that matters) I get issues with the ref definition and using the polyfill.

Type 'MutableRefObject<Element | null>' is not assignable to type 'string | ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined'.
  Type 'MutableRefObject<Element | null>' is not assignable to type 'RefObject<HTMLDivElement>'.
    Types of property 'current' are incompatible.
      Type 'Element | null' is not assignable to type 'HTMLDivElement | null'.
        Type 'Element' is missing the following properties from type 'HTMLDivElement': align, accessKey, accessKeyLabel, autocapitalize, and 108 more.  TS2322

    77 |   return (
    78 |     <Box position="relative" height="100%" onWheel={handleWheel}>
  > 79 |       <div ref={ref}>

[maslianok]

Should be fixed in 6.6.3