NextJS obscure 'props' error

[lukedanielson]

Hi there. I've setup a simple test page with "next": "13.4.3" and "@jwplayer/jwplayer-react": "^1.1.2" and I am getting a weird 'props' error that I can't seem to trace. Here is my page.tsx

"use client";

//@ts-ignore
import JWPlayer from "@jwplayer/jwplayer-react";

export default function VideoPlayerTest() {
  const onVisualQuality = (visualQuality: any) => {
    console.log("onVisualQuality", visualQuality);
  };

  const onCaptionsChanged = (track: any) => {
    console.log("onCaptionsChanged", track);
  };

  const onFullscreen = (fullscreen: any) => {
    console.log("onFullscreen", fullscreen);
  };
  return (
    <div className="test">
      <h2>Start editing to see some magic happen!</h2>
      <JWPlayer
        file="https://cdn.jwplayer.com/manifests/z1CDugB3.m3u8"
        library="https://cdn.jwplayer.com/libraries/T5EQoSVW.js"
        onVisualQuality={onVisualQuality}
        onCaptionsChanged={onCaptionsChanged}
        onFullscreen={onFullscreen}
      />
    </div>
  );
}

The player loads and plays successfully, but I can't seem to track down what this 'props' error is in the console:

If I remove the //@ts-ignore on line 3, it gives the ts error: Could not find a declaration file for module '@jwplayer/jwplayer-react'.

I believe it is some sort of hydration error specific to NextJS, but it is marked as a client component with the "use client"; directive, so is only running client side.

Any and all help to point me in the right direction would be greatly appreciated! Thanks.

[smitser]

We have found a trace in the jwplayer-react file within lib. Within the componentDidMount function there is a condition if(console.error("props",this.props). This will log the error to the console. This is not present in the 1.1.2 tag but it is present within the main branch.

[smitser]

I have created a PR to resolve this.

[lukedanielson]

@smitser Hi Jorn. Thank you for tracking this down. I have tried both "@jwplayer/jwplayer-react": "^1.1.2" and "@jwplayer/jwplayer-react": "github:jwplayer/jwplayer-react#main" as dependencies, but get the props error for both.

I can see your PR, however it looks like the team has not accepted it yet. I guess we just wait?

[smitser]

@smitser Hi Jorn. Thank you for tracking this down. I have tried both "@jwplayer/jwplayer-react": "^1.1.2" and "@jwplayer/jwplayer-react": "github:jwplayer/jwplayer-react#main" as dependencies, but get the props error for both.

I can see your PR, however it looks like the team has not accepted it yet. I guess we just wait?

Hey @lukedanielson Is has been merged now but there hasn't been a release yet. We just have to wait a bit longer I guess.

[lukedanielson]

@smitser The team has merged the fix. You can install the latest commit from the main branch by installing the branch directly:

"@jwplayer/jwplayer-react": "github:jwplayer/jwplayer-react#main",

I have done so and the error no longer appears.