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: ThaUnknown/rvfc-polyfill@3fb9187

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 1be8297 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.