NextJs integration support
oalexdoda opened this issue · comments
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:
- Place a video on a page using a Plyr player.
- 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;
can create codesandbox demo for us?
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>
);
}
Hey @haluvibe , the only non-serverside action I'm suspicious of it is about this line:
Line 38 in f5d6ab7
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
no idea, I can't have multiple videos with this library unfortunately atm
@chintan9 the same issue I am facing in my project, can anyone give a solution, please...
Same issue here.
It also happens on this repo's Next.js example project.
No news?
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.
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.
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?
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
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.
Thanks @realamirhe
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?
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?
Im having the same issue
@MokDevelopment whats the alternative player you tried?
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)
}}
/>
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>
)
}
I have created discussing on nextjs repo
please add more question and details also there
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.