NextJs integration support

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;

[altechzilla]

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

[realamirhe]

Hey @haluvibe , the only non-serverside action I’m suspicious of it is about this line: https://github.com/chintan9/plyr-react/blob/f5d6ab7b26fc4335b8eca499001369c77495cdfd/src/index.tsx#L38

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