requestVideoFrame polyfill is causing a error in Next.js hot-reload

[lantictac]

Version

• Phaser Version: 3.80.1
• Operating system: MacOS 14.4 & Windows 11
• Browser: Safari, Edge, Chrome

Description

The requestVideoFrame.js polyfill appears to be causing Next.js hot-reload to fully reload the project:

> next dev 
[... code edits made ...]
⚠ Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/messages/fast-refresh-reload
 ⨯ ReferenceError: HTMLVideoElement is not defined

This can be avoided by disabling SSR in Next, but the polyfill shouldn't break SSR.

The original polyfill project has a working fix for the issue: https://github.com/ThaUnknown/rvfc-polyfill/commit/3fb91876937dbd99edff7d48a05df70dfba4265e

Example Test Code

This code simply forces a reference to Phaser in a Next.js project. Editing the file should force Next to hot reload the code demonstrating the error in the log.

// In app/page.tsx
import { GameObjects } from 'phaser';
export const FORCE_PHASER_REF = GameObjects.Video.RENDER_MASK;

Additional Information

Fix https://github.com/phaserjs/phaser/commit/1be82975f7284950550a039e8e4085fe13595a46 didn't quite work.

Using the latest code from https://github.com/ThaUnknown/rvfc-polyfill/blob/main/index.js appears to avoid the issue:

Change:

if (HTMLVideoElement && !('requestVideoFrameCallback' in HTMLVideoElement.prototype) && 'getVideoPlaybackQuality' in HTMLVideoElement.prototype) {

To:

if (typeof HTMLVideoElement !== 'undefined' && !('requestVideoFrameCallback' in HTMLVideoElement.prototype) && 'getVideoPlaybackQuality' in HTMLVideoElement.prototype) {

Appears to fix hot reload in an Next.js SSR build.

[photonstorm]

Even with this change in place, Next.js SSR still complains about the use of navigator for us. How did you get around that?

[lantictac]

Even with this change in place, Next.js SSR still complains about the use of navigator for us. How did you get around that?

You're absolutely correct. I've created PR #6778 to avoid the other SSR related errors.

[photonstorm]

Thank you for submitting this issue. We have fixed this and the fix has been pushed to the master branch. It will be part of the next release. If you get time to build and test it for yourself we would appreciate that.