Script fails to load with react 18

[ashigirl96]

Using React 18 I get the following error, using React 17 I don't get the following error.

Uncaught (in promise) TypeError: Cannot read properties of null
 (reading 'removeAttribute')  at eval (YouTube.mjs?27e3:172:1)

When I use React18, this iframe will be null

https://github.com/tjallingt/react-youtube/blob/a816528020e6db532ba2239351ed5181d93c29fe/packages/react-youtube/src/YouTube.tsx#L365-L367

[florianuphoff]

@ashigirl96 any updates? we encountered a familiar problem with react 18 and react-youtube@^9.0.0 || ^10.0.0

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'src')
    at n.sendMessage (www-widgetapi.js:995:96)
    at go (www-widgetapi.js:984:100)
    at <computed>.ko.<computed> [as pauseVideo] (www-widgetapi.js:1017:135)
    at eval (YouTubePlayer.js?0b7e:163:1)

[elhe26]

Same here.

[Ricardo-Bonin]

The same here. nextjs 13 with react 18.

[danielbeckera]

Same here, any updates on this?

[juniorforlife]

I got similar error

react-dom.development.js:12056 Uncaught TypeError: Cannot read properties of null (reading 'src')
    at p.sendMessage (www-widgetapi.js:1003:96)
    at Lo (www-widgetapi.js:994:100)
    at <computed>.No.<computed> [as seekTo] (www-widgetapi.js:1025:135)

This crashes the whole app so it's a critical bug. Please take a look @tjallingt 🙏

[dcsan]

for me this was caused by navigating back and forth and not cleaning up properly. some combination like the below worked for me, ie clearing the ref on unmount, checking its set before seeking etc.

EDIT: seems this didn't fix it, still get this crash

// thin shim on YT iframe player
// https://www.npmjs.com/package/react-youtube
import { useSelector } from 'react-redux';
import YouTube, { YouTubePlayer, YouTubeProps } from 'react-youtube';
import { RootState } from '../../../../redux/store';
import { useEffect, useState } from 'react';

export function YouTubePlayWrapper() {
  const sourceId = useSelector((state: RootState) => state.pogState?.sourceId)
  const seekTime = useSelector((state: RootState) => state.pogState?.seekTime)
  const [playerRef, setPlayerRef] = useState<YouTubePlayer>()

  const onPlayerReady: YouTubeProps['onReady'] = (event) => {
    // access to player in all event handlers via event.target
    console.log('onPlayerReady', event.target);
    event.target.pauseVideo();
    setPlayerRef(event.target)
  }

  useEffect(() => {
    return () => {
      console.log('vidPlayer cleanup')
      setPlayerRef(undefined)
    }
  }, [])

  useEffect(() => {
    console.log('vidPlayer seek:', seekTime)
    if (seekTime && !playerRef) {
      console.error('seekTo - but no playerRef', { seekTime })
    } else {
      playerRef?.seekTo(seekTime!, true)
    }
    // https://developers.google.com/youtube/iframe_api_reference#seekTo
  }, [seekTime])

  const opts: YouTubeProps['opts'] = {
    width: "300px",
    height: "300px",
    playerVars: {
      // https://developers.google.com/youtube/player_parameters
      autoplay: 0
    },
  }

  if (!sourceId) return <div>loading</div>

  return (
    <div>
      {/* @ts-ignore */}
      <YouTube
        videoId={sourceId}
        opts={opts}
        onReady={onPlayerReady}

      />
    </div>
  )
}

[dcsan]

also i read somewhere that the autoplay was causing the issue, perhaps the video doesn't mount properly before playing

[konstk1]

Are you setting the width to 0 at any point by any chance? If you have a width state that defaults to 0 before being set by window resize, this will throw such an error.

Once I fixed the default width (away from 0), this issue disappeared.