Description
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.