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...

[zhiweit]

I encountered similar issue with dynamic import in nextjs and getting the same error as above.
Workaround referenced from stackoverflow

My solution is based on the facts that next/dynamic is built on top of React.lazy & React.Suspense. This solution works in my case (loading a dropdown on client side only - option ssr: false).

/**
 * Usage is the same as `dynamic()` from NextJS with 1 exception: `ssr` IS ALWAYS FALSE, hence the name of this function.
 * @param {() => any} importCallback Ex: () => import('./LazyComponent.jsx')
 * @param {{ loading?: () => import('react').ReactNode }} options This can be similar to options of `dynamic()` from NextJS
 */
export const clientOnly = (importCallback, { loading } = {}) => {
  const LazyComponent = lazy(importCallback);
  return forwardRef(function ClientOnlyComponent(props, forwardedRef) {
    const [isClient, setIsClient] = useState(false);
    useEffect(() => {
      setIsClient(true);
    }, []);
    return (
      isClient && (
        <Suspense fallback={loading?.()}>
          <LazyComponent
            {...props}
            ref={forwardedRef}
          />
        </Suspense>
      )
    );
  });
};

Then:

// ComponentB.jsx
const LazyComponentA = clientOnly(()=> import('./componentA'));

// later, use component A as normal in NextJS:
export const ComponentB = () => {
  //...
  return <LazyComponentA />;
};

I have checked workaround in the github issue you mentioned & I still came up with this solution because I don't want to expose a special prop to contain ref (instead of official React.forwardRef) on my lazy-loaded component (then I have to write documentation/comment to explain why).

This workaround works for me