NextJs integration support

[oalexdoda]

When loading a page with a player on localhost, a TypeError: Cannot read properties of null (reading 'getAttribute') error pops up.

To Reproduce

Steps to reproduce the behavior:

1. Place a video on a page using a Plyr player.
2. Navigate from one route (without a player) to another (with a player)

Expected Behavior

No popup error.

Screenshots

Desktop (please complete the following information):

• Stack: Next.js, React, Localhost
• OS: macOS
• Browser: Chrome
• Version: 102.0.5005.115 (Official Build) (x86_64)

Additional Context

• Using plyr-react as a dependency in a transpiled Next.js module.
• The local environment is using a custom hosts domain: "example.local:3000" instead of "localhost:3000".
• Does not occur on staging (hosted on Vercel).
• Doesn't occur every single time.
• It's possible it only occurs the first time a page is built in the .next folder. Try removing the .next folder and running the dev environment again to see it happening when navigating from one route to another as explained above.

Component Source Code

import Plyr from 'plyr-react';
import { Box } from '@mui/material';
import { useTheme } from '@mui/material/styles';
import 'plyr-react/dist/plyr.css';

const Player = ({
    src,
    type = 'video',
    provider = 'youtube',
    sources,
    sx,
    ...props
}) => {
    const theme = useTheme();

    return (
        <Box
            sx={{
                '--plyr-color-main': theme.palette.primary.main,
                borderRadius: `${theme.shape.borderRadius}px`,
                overflow: 'hidden',
                ...sx,
            }}
        >
            <Plyr
                source={{
                    type,
                    sources: sources || [
                        {
                            src: src,
                            provider: 'youtube',
                        },
                    ],
                }}
                {...props}
            />
        </Box>
    );
};

export default Player;

[chintan9]

can create codesandbox demo for us?

[haluvibe]

can create codesandbox demo for us?

You can't because the issue only appears during yarn dev - not after it's built so codesandbox won't be able to replicate the issue but it's easy as starting a new nextjs project and

export default function IndexPage() {
  return (
    <div>
      <Plyr
        source={{
          type: "video",
          sources: [{ src: "9bZkp7q19f0", provider: "youtube" }]
        }}
      />
    </div>
  );
}

[realamirhe]

Hey @haluvibe , the only non-serverside action I'm suspicious of it is about this line:

plyr-react/src/index.tsx

Line 38 in f5d6ab7

const plyr = new PlyrJS(".plyr-react", params!.options || {});

But the error and our last investigation show that the problem was related to the plyr itself.
Even when I used the next dynamic import with ssr: false on the custom Plyr wrapper component it didn't work well.

Any try-out or suggestions for fixing this issue is pleased

[haluvibe]

no idea, I can't have multiple videos with this library unfortunately atm

[AmmadKhanM]

@chintan9 the same issue I am facing in my project, can anyone give a solution, please...

[erip2]

Same issue here.
It also happens on this repo's Next.js example project.

[oalexdoda]

No news?

[realamirhe]

Hey all
Barely forgot the issue, any help would be appreciated we are short of devs unfortunately
but I put a reminder in my calendar to give it another shot next week if everything goes well.

[oalexdoda]

Thanks a lot @realamirhe - it's a major issue causing errors on every page load, multiple apps, etc. and makes Plyr React super difficult to use.

[chintan9]

https://bobbyhadz.com/blog/javascript-cannot-read-property-getattribute-of-null

It look like there some issue how we use nextjs with library.

Same issue here. It also happens on this repo's Next.js example project.

@erip2 can you share deployed project?

[oalexdoda]

Whoever wrote that blog post using GPT to sell their book at the end… amateur 🤣

https://bobbyhadz.com/blog/javascript-cannot-read-property-getattribute-of-null

[chintan9]

Whoever wrote that blog post using GPT to sell their book at the end… amateur 🤣

https://bobbyhadz.com/blog/javascript-cannot-read-property-getattribute-of-null

At least SEO was good.

I will look much deeper on this issue.

@altechzilla It very helpful if you create sample repo for this issue.

Please use latest stable version without material UI.

[realamirhe]

Hey @altechzilla, @erip2, @haluvibe

I post the issue in the plyr package and will post the update in this repo after getting an answer, make sure to upvote the discussion or repost it as an issue if you can help there.

sampotts/plyr#2599

[oalexdoda]

Thanks @realamirhe

[MokDevelopment]

damn ... we planned to use Plyr for 3 upcoming NextJs projects ... hopefully it can be fixed... strange is also that the error is thrown randomly - but in every NextJs project we tested it - solution for now is that we use another player.

Is it fixable in general or is Plyr just not compatible with the way NextJs works behind the scenes?

[realamirhe]

please consider keeping sampotts/plyr#2599 active till it gets its desired attraction.

I also tested mocking the media object in the plyr instance in the rendering, but it happens in the initiation phase, it might be possible to make another youtube object and load that in the plyr youtube player. but need internal plyr change.

could someone test the error occurrence with the patched plyr package (patch-package) and see error still exists, if that resolves the issue we might open a pull request for solving it ourselves?

[kasvith]

Im having the same issue

[chintan9]

sampotts/plyr#2636

[kasvith]

@MokDevelopment whats the alternative player you tried?

[3mr-5aled]

I Provided an id before the source attribute and it worked

<Plyr
      id={videoId}
      source={{
        type: "video",
        sources: [{ src: videoId, provider: "youtube" }],
      }}
      options={{
        // You can add any additional Plyr options here
        controls: [
          "play-large",
          "play",
          "progress",
          "current-time",
          "mute",
          "volume",
          "speed",
          "fullscreen",
        ],
        youtube: { noCookie: true }, // Use YouTube's privacy-enhanced mode (optional)
      }}
    />

[henrybabbage]

I'm having the same issue (I think). Player appears for a moment and then disappears. I am trying to render an array of video players. The error that Next JS throws is: TypeError: e.embed is null. I'm running it in NextJS app router, on the latest version 13.5.2. My component looks like this:

'use client'

import { css } from '@/styled-system/css'
import type { VideoProps } from '@/types'
import dynamic from 'next/dynamic'
import type { APITypes } from 'plyr-react'
import 'plyr-react/plyr.css'
import { useRef } from 'react'

const Plyr = dynamic(() => import('plyr-react'), { ssr: false })

export type PlayerProps = {
    provider: 'vimeo'
    // videoOptions?: any
} & VideoProps

export default function VideoPlayer(props: PlayerProps) {
    const { url, provider, _key, title } = props

    const ref = useRef<APITypes>(null)

    return (
        <div key={_key} className={css({ width: '100%', height: '100%', position: 'relative' })}>
            <Plyr
                ref={ref}
                key={_key}
                id="plyr-player"
                playsInline
                source={{
                    type: 'video',
                    sources: [
                        {
                            src: url,
                            provider: provider
                        }
                    ]
                }}
                // options={videoOptions}
            />
        </div>
    )
}

[chintan9]

I have created discussing on nextjs repo

vercel/next.js#58911

please add more question and details also there

[GabrielJesusS]

When i tried to use react-plyr i bumped into the same issue:

Disclaimer: Ignore the rest of the page, is an example test only btw.

Debugging into the internal plyr and react-plyr files i finally found the function what is called to initiate the youtube script routine. Logging inside this function, i found a strange behavior, the function was been called twice, but the component or the other items inside they didn't suffered a purposeful re-render, which reminded me about a flag of react, the strict mode flag:

According to react docs, this flags causes an re-run on some functions and other items, among then, the functional components.

This "get attribute" error occurs just in dev mode because the react strict mode is active by default into next js app router since the version 13.4:

Testing and debugging without the strict mode flag, the error doesn't occurs, but this maybe not a good practice.

Conclusion: You can still using the react-plyr lib quietly, because this is not a "bug", is more like an scenario where most of us isn't accustomed to work. Even so, the lib must should predict scenarios like that to avoid errors like that caused by a default react behavior.