Hi everyone,
I’m integrating a Godot 4.x WebGL export into a React single-page application and running into a critical issue with component lifecycle
management.
The Problem
When the React component containing Godot unmounts and then remounts (either due to React StrictMode in development or user navigation), I get
errors like:
Uncaught SyntaxError: Identifier ‘Features’ has already been declared
Uncaught SyntaxError: Identifier ‘Engine’ has already been declared
The Godot engine script (index.js) declares these as const in the global scope, and JavaScript doesn’t allow redeclaring const variables. Even
though I remove the script tag on unmount, the executed code remains in memory.
What I’ve Tried
- Removing script tags on unmount - Doesn’t work because executed code persists
- Calling engine.requestQuit() and Engine.unload() - Doesn’t remove global const declarations
- Global flags to prevent reload - Works but breaks React’s component model (can’t remount)
- Disabling React StrictMode - Works in dev but doesn’t solve production navigation issues
My Questions
- Is there a way to truly “reset” or “unload” a Godot WebGL instance without using an iframe? Something that clears all global declarations?
- Has anyone successfully integrated Godot WebGL in a React SPA that supports remounting/navigation? What approach did you use?
- Are there Godot export options I’m missing that might help with this? (e.g., module exports instead of global scope?)
- Is the iframe approach the recommended way, or is there a simpler solution I’m overlooking?
Environment
- Godot: 4.x WebGL export
- React: 18+ with React Router (SPA)
- Issue occurs: React StrictMode (dev), user navigation (prod)
- Communication: JavaScriptBridge + CustomEvents / postMessage
Any insights or alternative approaches would be greatly appreciated! I’m happy to provide more code details if needed.
Thanks in advance!