TypeScript declarations for react-player/lazy broken in v2.8.1

[cduff]

Current Behavior

Previously successfully using react-player v2.7.2 in TypeScript project importing react-player/lazy.

Upgrading to react-player v2.8.1 results in TypeScript errors as the TypeScript declarations for react-player/lazy have been broken.

Expected Behavior

Working TypeScript declarations for react-player/lazy.

Steps to Reproduce

Just try importing "react-player/lazy" in TypeScript project using react-player v2.8.1.

Environment

• URL attempting to play: n/a
• Browser: Chrome
• Operating system: Windows 10
• jsFiddle example: n/a

Other Information

Related to old closed issue #918.

The react-player/lazy/index.d.ts file seems to be a copy of the react-player/index.d.ts file but this simple approach no longer works due to broken relative path imports.

[antoinelin]

Hello 🖖

Got this error on my side :

JSX element class does not support attributes because it does not have a 'props' property.ts(2607)
'ReactPlayer' cannot be used as a JSX component.
  Its instance type 'ReactPlayer' is not a valid JSX element.
    Type 'ReactPlayer' is missing the following properties from type 'ElementClass': render, context, setState, forceUpdate, and 3 more.

Import :

import ReactPlayer from 'react-player/lazy'`

Usage :

<ReactPlayer
  url={url}
  width="100%"
  height="100%"
  playing
  muted
  controls={false}
/>

[cduff]

Hello 🖖

Got this error on my side :

JSX element class does not support attributes because it does not have a 'props' property.ts(2607)
'ReactPlayer' cannot be used as a JSX component.
  Its instance type 'ReactPlayer' is not a valid JSX element.
    Type 'ReactPlayer' is missing the following properties from type 'ElementClass': render, context, setState, forceUpdate, and 3 more.

Import :

import ReactPlayer from 'react-player/lazy'`

Usage :

<ReactPlayer
  url={url}
  width="100%"
  height="100%"
  playing
  muted
  controls={false}
/>

Hi @toinelin, yes I believe that error is caused by the react-player/lazy TypeScript declarations being broken.

[cookpete]

@JuanM04 Any ideas?

There does seem to be a circular requirement between base.d.ts and index.d.ts. Not sure if that’s related.

I can't see any import statements that would be affected by the directory it's in.

[jahed]

It's because types/index.d.ts needs all of its imports in the same directory but in prepublish it's copied alone to lazy/index.d.ts so the imports need to go back a directory. I can try sending a PR over if you want?

Update: I've sent a PR. #1153

[JuanM04]

That's basically it. lazy/index.d.ts, it imports ./base when it should import ../base