Function components cannot be given refs.

[insivika]

Be sure to search for your issue before opening a new one.

Current Behavior

In the implementation below I receive the following error:

warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

import { useRef, useEffect } from 'react';

import React from 'react';
import Proptypes from 'prop-types';
import dynamic from 'next/dynamic';

const ReactPlayer = dynamic(() => import('react-player/lazy'), { ssr: false });

const VideoPlayer = ({ src }) => {
  const playerRef = useRef(null);

  useEffect(() => {
    if (playerRef.current) {
      const innerPlayer = playerRef.current.getInternalPlayer('hls');

      console.log('innerPlayer', innerPlayer);
    }
  }, []);

  return <ReactPlayer ref={playerRef} width="100%" height="100%" url={src} />;
};
VideoPlayer.propTypes = {
  src: Proptypes.string.isRequired,
};

export default VideoPlayer;

Expected Behavior

Based on the examples i should be able to set the ref this way

Steps to Reproduce

1. Create nextjs instance
2. Dynamically import react player
3. attempt to set the ref

Version

using "react-player": "^2.15.1",

[dcsan]

did you find any way to workaround this? since its needed to use a ref for all method calls, this seems like a blocker to use and that this component is basically unmaintained into the age of functional components rather than class components...