Error with addEventListener in Pixi.js: "Cannot invoke an object which is possibly 'undefined'" TypeScript

I'm developing a web application using Pixi.js, and I'm encountering the following error when using the addEventListener method:

Cannot invoke an object which is possibly 'undefined'


Here's a snippet of the relevant code:

import { Application, Texture, ParticleContainer } from 'pixi.js';
import { Emitter, upgradeConfig } from '@pixi/particle-emitter';
import * as particleSettings from "./emitter.json";

const particleContainer = new ParticleContainer();

const app = new Application({
  view: document.getElementById("pixi-canvas") as HTMLCanvasElement,
  resolution: window.devicePixelRatio || 1,
  autoDensity: true,
  backgroundColor: 0x6495ed,
  width: 640,
  height: 480
});

// ...

app.view.addEventListener('mouseup', (e) => {
  // ...
});

I'm getting an error when calling the addEventListener method, indicating that app.view might be undefined. I've confirmed that the element is correctly retrieved using document.getElementById("pixi-canvas"). I've also made sure that I'm using the latest versions of Pixi.js and its related modules.

I would appreciate any advice on identifying the cause of this error or suggestions on how to resolve it.

Additional information:

I've verified that the <canvas> element with the ID "pixi-canvas" exists in the HTML.
I'm using Pixi.js and its related modules with the latest versions.
Any guidance on how to resolve this error or insights into the potential cause would be greatly appreciated. Thank you!

The error message suggests that app.view might be undefined when calling the addEventListener method. This could happen if the view property of the app object is not properly initialized or if the getElementById call doesn't return the expected element.

To troubleshoot this issue, you can try the following steps:

1. Verify that the element with the ID "pixi-canvas" exists in the HTML markup. Double-check the spelling and ensure that it's correctly placed in the document.

2. Confirm that the JavaScript code is executing after the DOM has finished loading. You can either move the script tag to the bottom of the HTML body or wrap your code in an event listener for the DOMContentLoaded event:

   document.addEventListener('DOMContentLoaded', () => {
   // Your code here
   });

3. Check if the getElementById call is returning the correct element. You can log the result to the console to verify:

   const canvasElement = document.getElementById("pixi-canvas");
   console.log(canvasElement);

Make sure that the canvasElement is not null or undefined. If it is, double-check that the ID is correct and that the element is present in the DOM when the code is executed.

1. Ensure that you're using the correct property for the canvas element in Pixi.js. In earlier versions of Pixi.js, the property was view, but in recent versions, it has been changed to renderer.view. Update your code accordingly:

   app.renderer.view.addEventListener('mouseup', (e) => {
   // ...
   });

By following these steps, you should be able to identify the cause of the "undefined" error and resolve it.