V3 - Incompatible component causing prerender to fail whilst enclosed in <BrowserOnly>

Get Help and Help Others
1

Howdy folks.

So testing out v3 and after a good couple of hours troubleshooting and minor changes I am down to one component which is causing pre-render to fail.

I am using MuxPlayer (https://www.npmjs.com/package/@mux/mux-player) which is causing things to fail.

My reading of the docs makes me think that i can simply wrap this component in or do a check like isBrowser, and things will keep working. This works successfully for other parts of the page I am trying to render.

Unfortunately, it does not work for MuxPlayer.

Having the component commented out, but the import still available does not cause the fail.

Here is a look at the component

<MuxPlayer
            // ref={vidRef}
            streamType="on-demand"
            style={{
              height: '100%',
              maxWidth: '100%',
              width: '100%',
              visibility: showplay ? 'hidden' : 'visible',
              position: 'absolute',
              top: '0',
            }}
            playbackId={playbackId}
            preferMse
            metadata={{
              video_id: playbackId,
              video_title: `${slug}`,
              viewer_user_id: userId || null,
            }}
            onEnded={handleVideoEnd}
            onPause={() => {
              setShowplay((showplay) => !showplay)
            }}
            playsInline
          />

I have attempted to comment out props to get this working with no success. Anyone got any thoughts on where i would look next?

Ta

2

Could you please provide a github repo that demonstrates the problem? Do that and I’m happy to take a look :slight_smile:

3

Thanks, Tobbe. Will try and get you access. It’s a company repo.

4

hey @Tobbe. Still trying to get you access to the repo, but I have done some more troubleshooting.

It does indeed seem there is an issue with the MuxPlayer component. If i put this component on a page I am getting the following error

---------- Error rendering path "/v1/gCpyme6zAfaYJl5ckK5QZ4" ----------
TypeError: globalObject.document.addEventListener is not a function

If I try and conditionally render the component using isBrowser or the error still occurs.

If I removed the component but leave the Muxplayer import. I still get the error.

Is there a way around this or do I need to go in search of a compatible video player?

5

@shansmith01 Sorry about the slow response

You could try a conditional import. Something like this

let MuxPlayer = undefined
if (/* some condition */) {
  MuxPlayer = require('@mux/MuxPlayer').SomethingMaybe
}
6

Thanks. I ended up moving in a different direction, but i will try and make some time to play with this so we can have the results recorded here

1 Like