Bug: Document getting set in Node "@mux/mux-player": "0.1.0-beta.26",

[stolinski]

Which Mux Elements/Packages has a bug?

"@mux/mux-player": "0.1.0-beta.26",

Which browser(s) are you using?

Node

Which operating system(s) are you using?

macOS

How are you using Mux Elements?

import '@mux/mux-player'

Describe the bug

We're seeing that after importing @mux/mux-player document is no longer undefined within Node which in turn breaks several 3rd party packages with one-such being prismjs who uses the existence of document as a check for node. I

Steps To Reproduce

1. SSR'd site NextJS / Svelte Kit ect
2. Install and import @mux/mux-player
3. Observe document no longer being undefined on Node.

I attempted to find where in mux player this was getting set, but I was unable to find it.

[stolinski]

I should also mention that I don't know if this is Mux's or Prism's responsibility here. ie should prism be doing better checks, but I suppose it is unexpected to have document not be undefined in node.

[gkatsev]

Thanks for the issue! This is likely due to a polyfill we use so that SSR doesn't break when Mux Player is imported. We probably need to be more clever so that other packages with particular expectations don't break.

[dylanjha]

Thanks @stolinski fwiw

• this is the polyfills file in elements
• this is the shim in media-chrome

We'll see what we can do here, this is the prisma lib you're using, I think:

• https://github.com/prisma/prisma

Can you include links to other 3rd party libs that caused issues (so that we can reference it, and also might help others who run into the same problem).

Looking at the implementation, Media Chrome does a nice thing here which is that it doesn't define any globals, it just uses a shim when the globals are not available. Mux Elements on the other hand defines things on globalThis. The Media Chrome approach feels safer.

[davekiss]

Scott's mentioning prismjs here, not Prisma -- JS is running out of names

Prism will only return early if document is undefined

https://github.com/PrismJS/prism/blob/3211982327b1c6db542dbcb62bd83038d5884e77/plugins/autoloader/prism-autoloader.js

[davekiss]

I just ran into this issue myself using "@liveblocks/client": "^0.17.5" and "@mux/mux-player-react": "^0.1.0-beta.22"

❯ yarn dev
yarn run v1.22.19
$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Loaded env from /Users/davekiss/code/mux/my-app/.env.local
event - compiled client and server successfully in 864 ms (182 modules)
wait  - compiling /_error (client and server)...
event - compiled client and server successfully in 148 ms (183 modules)
warn  - Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/basic-features/fast-refresh#how-it-works
wait  - compiling / (client and server)...
event - compiled client and server successfully in 566 ms (542 modules)
TypeError: document.addEventListener is not a function
    at createClient (file:///Users/davekiss/code/mux/my-app/node_modules/@liveblocks/client/index.mjs:1009:16)
    at eval (webpack-internal:///./liveblocks.config.ts:18:80)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
TypeError: document.addEventListener is not a function
    at createClient (file:///Users/davekiss/code/mux/my-app/node_modules/@liveblocks/client/index.mjs:1009:16)
    at eval (webpack-internal:///./liveblocks.config.ts:18:80)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
warn  - Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/basic-features/fast-refresh#how-it-works
Error: Failed to fetch update manifest Internal Server Error
    at http://localhost:3000/_next/static/chunks/fallback/webpack.js?ts=1660921557813:1153:37
error - TypeError: document.addEventListener is not a function
    at createClient (file:///Users/davekiss/code/mux/my-app/node_modules/@liveblocks/client/index.mjs:1009:16)
    at eval (webpack-internal:///./liveblocks.config.ts:18:80)
    at processTicksAndRejections (node:internal/process/task_queues:96:5) {
  page: '/'
}

[davekiss]

FYI this seems to work for me with nextjs in the meantime:

import dynamic from 'next/dynamic'

const MuxVideo = dynamic(() => import('@mux/mux-video-react'), {
  ssr: false,
})

[gkatsev]

@stolinski hey, we just released @luwes's fix for this. Try out @mux/mux-player 0.1.0-beta.27