I have taken the code from the pixi-viewport codepen example and tried to get it to work in a fresh installation of Next.js 13 (React 18).
I have received a lot of errors. I have come fairly close to solving almost all errors, but ultimately cannot get the section to work that actually uses pixi-viewport. The code in the example is clearly outdated and doesn't use standard import syntax, especially for pixi-viewport, and also lacks accurate types, making it unclear how to use this in a React app in practice.
PS: I have tried to set up an example of the above on StackBlitz, but could not get that to work either due to a different error: Error in /turbo_modules/@pixi/color@7.2.4/lib/Color.js (6:19) Unexpected token 'export'
Current Behavior
I have taken the code from the pixi-viewport codepen example and tried to get it to work in a fresh installation of Next.js 13 (React 18).
I have received a lot of errors. I have come fairly close to solving almost all errors, but ultimately cannot get the section to work that actually uses pixi-viewport. The code in the example is clearly outdated and doesn't use standard import syntax, especially for pixi-viewport, and also lacks accurate types, making it unclear how to use this in a React app in practice.
FYI: A similar example can be found in the React Pixi Custom Components docs.
Expected Behavior
import {x} from 'y'
syntax, especially for pixi-viewportSteps to Reproduce
Environment
I don't know about the versions used in the codepen, but I am using the following:
"pixi.js": "^7.2.4", "pixi-viewport": "^5.0.1", "@pixi/react": "^7.1.0", "react": "18.2.0", "react-dom": "18.2.0", "next": "13.4.3", "typescript": "5.0.4",
Possible Solution
Additional Information
Here is how far I got with updating the example. This runs. However, if you comment the
PixiViewport
component back in, it stops working.PS: I have tried to set up an example of the above on StackBlitz, but could not get that to work either due to a different error: Error in /turbo_modules/@pixi/color@7.2.4/lib/Color.js (6:19) Unexpected token 'export'