Hello,
When using voyager-explorer inside a React component that is conditional (i.e. is added/removed from the DOM based on a flag/property) an error is thrown when the component is removed (see below). I suspect this coming from the fact that React removes elements from the DOM when not using them. So, React removes Explorer and the Voyager JS is still running responding to an update, tries to pull the element, but it's already gone.
TypeError: Cannot read properties of null (reading 'style')
at Mp.tick (voyager-story.min.js:32:37431)
at Ft.tick (voyager-story.min.js:8:1747202)
at kf.tick (voyager-story.min.js:8:1751092)
at Ft.tick (voyager-story.min.js:8:1747202)
at Fe.pulse (voyager-story.min.js:8:1698268)
at Fe.onAnimationFrame (voyager-story.min.js:8:1698394)
This traces back to Voyager 'client/components/CVOrbitNavigation.ts', line 295. Above that it's grabbing an element 'prompt' from the arManager.shadowRoot DOM. Checking for if 'prompt' exists before using it (e.g. a conditional on line 277) should avoid the error.
Note: there are a few instances where getElement(Id) is used and the return is not checked for 'null' before using it so those would likely need the same treatment.
gjcope
commented
2 weeks ago
Hello, When using voyager-explorer inside a React component that is conditional (i.e. is added/removed from the DOM based on a flag/property) an error is thrown when the component is removed (see below). I suspect this coming from the fact that React removes elements from the DOM when not using them. So, React removes Explorer and the Voyager JS is still running responding to an update, tries to pull the element, but it's already gone.
This traces back to Voyager 'client/components/CVOrbitNavigation.ts', line 295. Above that it's grabbing an element 'prompt' from the arManager.shadowRoot DOM. Checking for if 'prompt' exists before using it (e.g. a conditional on line 277) should avoid the error.
Note: there are a few instances where getElement(Id) is used and the return is not checked for 'null' before using it so those would likely need the same treatment.