R3F and Drei TypeError: Cannot read properties of null (reading 'addEventListener') when text and multiple canvas on same page

Questions
1

Hello, first of I am a beginner when it comes to ThreeJS and have been slowly trying to learn.

I have managed to pinpoint my error point, although I am unsure if that is the actual core problem here, as it was working fine in previous iterations of my project.

I have two R3F Canvas components on my page. Both of these have a Lights component, a model component and a R3D PerspectiveCamera component. I have a feeling this perspective camera might have something to do with the problem as my project was running error free untill recently and this is one of the things that has changed (there have been quite a few changes so its hard to say, and i also have not worked on the project in a while).

The error point that I managed to pinpoint is two text components inside my first canvas component. These two text components are inside a mesh. The text components themselves are both R3D imports. One of them is a Text3D component wrapped inside a Center. The other one is a regular R3D Text component.

I will add the errors as images. It is hard for me to figure out whats wrong since it appears like the errors are being thrown from R3F.

[edit] :Some more information. The errors dissapear if there is only 1 canvas on the page. The errors also dissapear if the text components are removed (reason i thought they were the issue)

Would appreciate if anyone can pinpoint me in the right direction, or share any wisdom about the errors.

error1
error1610×507 24.5 KB

error2
error3
error3608×505 24.5 KB

2

Try Drei View.
You have one canvas on your html document, but multiple views tracked to Divs. Views are like different scenes.

Example

1 Like
3

Hey!

I was kind of hesitant to try and implement this solution as i felt i would have had to rework a big portion of my project, but i sat down, looked into how the views worked and got the test version implemented.

And it worked, no errors.

I had to do a little bit of tweaking as you always do when it comes to how my two previous canvas’ were setup.

Since im using NextJS 13 and my main page does my data fetching in a server component, i had to move most my content into a seperate client component so that i could use react hooks. I had to define my refs at the top level parent component and then pass them down into the single canvas component now, aswell as a seperate component that holds the div for the 2nd view (previously canvas 2). This was due to the fact that my project is modular with several components and the canvas components were not previously children of the same parent.

Thanks for pointing me in the right direction, now im gonna go ahead and clean up my project to fully implement this solution.

Have a nice day.

1 Like