CanvasRenderer and Container object not working together

[humbertaco]

Hi everyone,

This is my first post, so please let me know in case I miss anything!

I am currently implementing some graphic stuff by means of React and Pixi.js for a data visualization project. I have part of it up and running. Recently, I needed to make use of CanvasRenderer because I have multiple small canvases (with WebGL the browser was throwing warnings about the loss of contexts, problem that apparently does not happen with CanvasRenderer context). The thing is that I followed the same approach:

1. Create my renderer the usual way:

const renderer = new CanvasRenderer(options);

2. Create some container that functions as a stage:

// graphics is an instance of Graphics with some drawing primitives
const stage = new Container();
stage.addChild(graphics);

3. Render the scene:

renderer.render(stage);

 

The problem that I am finding is that the stage container does not expose any renderCanvas method, which seems to be called by the CanvasRenderer's render method internally.

At the beginning of my react component, I am importing these things:

import {CanvasRenderer} from "@pixi/canvas-renderer";
import {Container} from "@pixi/display"
import '@pixi/canvas-display'; // This package seems to be the one adding the renderCanvas function that I miss

I have even tried with pixi.js-legacy package by importing directly CanvasRenderer and Container. However, the result seems to be the same.

 

My question is: is there any specific way to import the components in order to make this work? Am I missing some silly detail?

 

Many thanks in advance!

[ivan.popelyshev]

It should work.

Any errors in the console?

[humbertaco]

Hi Ivan, thanks for your reply!

I have been debugging (extensively) and it seems the error was caused by some odd state of package-lock.json of npm, or some strange dependency issue. Deleting that file (also did for yarn.lock), plus all the modules, and starting from scratch to install all the dependencies seemed to make the trick. I did not even think of this option, but after your message saying that it should all work fine, I created some basic test with a new fresh project and I realized everything was just working fine.

Perhaps this post can help anyone who bumps into a similar problem.

Thanks again and sorry for the mess!