-
|
Hey all, I have been trying to set up Phaser to run with NextJS. I thought it would be pretty straightforward, but I am getting an error I dont know enough about to resolve. Would really appreciate some suggestions. Long story short, heres the error: How to replicate: npx create-next-app phaser-nextnpm install phaser// app/page.tsx
"use client";
import Phaser from "phaser";
import { useEffect } from "react";
class Example extends Phaser.Scene {
constructor() {
super();
}
}
export default function Home() {
useEffect(() => {
const config = {
type: Phaser.AUTO,
width: 800,
height: 600,
scale: {
parent: "game-container",
},
scene: Example,
};
const game = new Phaser.Game(config);
}, []);
return <div id="game-container"></div>;
}npm run devError: |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 1 reply
-
|
Sounds like it's trying to include the actual source and build Phaser, rather than take the dist file (or bundled module). We use loads of webpack compile flags through-out the code to selective build in certain features (like Spector), but if they aren't respected it's going to cause problems like this I guess. Is there a way to just get it to use the pre-built Phaser module? |
Beta Was this translation helpful? Give feedback.
-
|
Thank you for clarifying. I switched to using the CDN in <script> tag and that seems to be working. For future reference, compared to the procedure above: No more // app/layout.tsx
...
return (
<html lang="en">
<head>
<script
src="//cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser.min.js"
async
></script>
</head>
<body className={inter.className}>{children}</body>
</html>
);Add phaser.d.ts to the root directory. Also turned off reactStrictMode to prevent double loading the game in developer mode. // next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = { reactStrictMode: false };
module.exports = nextConfig;And added unmount function to the bottom of the useEffect // app/page.tsx
return () => {
game.destroy(true);
}; |
Beta Was this translation helpful? Give feedback.
Thank you for clarifying. I switched to using the CDN in <script> tag and that seems to be working.
For future reference, compared to the procedure above:
No more
npm install phaserAdd phaser.d.ts to the root directory.
Also turned off reactStrictMode to prevent double loading the game in developer mode.