TypeScript definitions: the default export has no compatible call signatures

[NNNaix]

Hello, first of all thanks to the contribution of ctrlplusb.

Problem

Below is my code in a tsx file:

import sizeMe from 'react-sizeme'
// create <MyComponent/>
export default sizeMe()(<MyComponent/>)

Then when I use webpack for build, I get an error like this:

ERROR TS2349: Cannot invoke an expression whose type lacks a call signature. Type \'typeof import("/workproject/node_modules/react-sizeme/react-sizeme")\' has no compatible call signatures.

Environment

• node version: 6.10.0
• webpack version: 4.19.1
• typescript version : 3.1.3

Solution

1. temporary: replace import sizeMe from 'react-sizeme' with import { withSize } from 'react-sizeme' because withSize have a type definition.
2. final: optimize react-sizeme.d.ts like this

import { Component, ComponentType, ReactNode, ReactElement } from 'react'

declare namespace sizeMe {
  type Omit<T, K> = Pick<T, Exclude<keyof T, K>>

  export interface SizeMeProps {
    size: {
      width: number | null
      height: number | null
    }
  }

  export interface SizeMeOptions {
    monitorWidth?: boolean
    monitorHeight?: boolean
    monitorPosition?: boolean
    refreshRate?: number
    refreshMode?: 'throttle' | 'debounce'
    noPlaceholder?: boolean
  }

  export interface SizeMeRenderProps extends SizeMeOptions {
    children: (props: SizeMeProps) => ReactElement
  }
  export class SizeMe extends Component<SizeMeRenderProps> {}

  export const withSize: (
    options?: SizeMeOptions,
  ) => <P extends object = {}>(
    component: ComponentType<P>,
  ) => ComponentType<Omit<P, 'size'>>
}
declare function sizeMe(
  options?: sizeMe.SizeMeOptions,
): <P extends object = {}>(
  component: ComponentType<P>,
) => ComponentType<sizeMe.Omit<P, 'size'>>

export = sizeMe

[ctrlplusb]

My apologies for the delay. I shall look at this soon. 👍