React pixi crashes with opened dev-tools

[GorgeousPuree]

Description

Greetings, I've faced some strange bevahior. If I refresh the page with opened dev-tools, pixi crashes. If it's closed, pixi works good. Project contains bare Stage component. I guess there's something wrong with versions, as half of the year ago I didn't have such errors.

const MasksComponent: React.FC = () => {
    const [mounted, setMounted] = React.useState(false);

    React.useEffect(() => {
        setMounted(true);
    }, []);

    return (
        <>
            {mounted ? <Stage
                options={{
                    backgroundColor: 0x012b30,
                }}
            >
            </Stage> : <></>}

        </>
    )
}

export default MasksComponent;

Additional info

Uncaught Error: Invalid value of 0 passed to checkMaxIfStatementsInShader at checkMaxIfStatementsInShader (checkMaxIfStatementsInShader.ts:36:1) at AbstractBatchRenderer.contextChange (AbstractBatchRenderer.ts:254:1) at Runner.emit (Runner.ts:81:1) at ContextSystem.initFromContext (ContextSystem.ts:111:1) at ContextSystem.initFromOptions (ContextSystem.ts:124:1) at new Renderer (Renderer.ts:310:1) at Renderer.create (Renderer.ts:223:1) at autoDetectRenderer (autoDetectRenderer.ts:41:1) at new Application (Application.ts:104:1) at Stage.componentDidMount (index.js:115:1) checkMaxIfStatementsInShader @ checkMaxIfStatementsInShader.ts:36 AbstractBatchRenderer.contextChange @ AbstractBatchRenderer.ts:254 Runner.emit @ Runner.ts:81 ContextSystem.initFromContext @ ContextSystem.ts:111 ContextSystem.initFromOptions @ ContextSystem.ts:124 Renderer @ Renderer.ts:310 Renderer.create @ Renderer.ts:223 autoDetectRenderer @ autoDetectRenderer.ts:41 Application @ Application.ts:104 componentDidMount @ index.js:115 invokeLayoutEffectMountInDEV @ react-dom.development.js:25133 invokeEffectsInDev @ react-dom.development.js:27351 commitDoubleInvokeEffectsInDEV @ react-dom.development.js:27327 flushPassiveEffectsImpl @ react-dom.development.js:27056 flushPassiveEffects @ react-dom.development.js:26984 (anonymous) @ react-dom.development.js:26769 workLoop @ scheduler.development.js:266 flushWork @ scheduler.development.js:239 performWorkUntilDeadline @ scheduler.development.js:533

index.js:239 Uncaught TypeError: Cannot read properties of null (reading 'off') at Stage.componentWillUnmount (index.js:239:1) at callComponentWillUnmountWithTimer (react-dom.development.js:22852:1) at safelyCallComponentWillUnmount (react-dom.development.js:22873:1) at commitDeletionEffectsOnFiber (react-dom.development.js:24129:1) at recursivelyTraverseDeletionEffects (react-dom.development.js:23989:1) at commitDeletionEffectsOnFiber (react-dom.development.js:24118:1) at recursivelyTraverseDeletionEffects (react-dom.development.js:23989:1) at commitDeletionEffectsOnFiber (react-dom.development.js:24118:1) at recursivelyTraverseDeletionEffects (react-dom.development.js:23989:1) at commitDeletionEffectsOnFiber (react-dom.development.js:24170:1) componentWillUnmount @ index.js:239 callComponentWillUnmountWithTimer @ react-dom.development.js:22852 safelyCallComponentWillUnmount @ react-dom.development.js:22873 commitDeletionEffectsOnFiber @ react-dom.development.js:24129 recursivelyTraverseDeletionEffects @ react-dom.development.js:23989 commitDeletionEffectsOnFiber @ react-dom.development.js:24118 recursivelyTraverseDeletionEffects @ react-dom.development.js:23989 commitDeletionEffectsOnFiber @ react-dom.development.js:24118 recursivelyTraverseDeletionEffects @ react-dom.development.js:23989 commitDeletionEffectsOnFiber @ react-dom.development.js:24170 commitDeletionEffects @ react-dom.development.js:23976 recursivelyTraverseMutationEffects @ react-dom.development.js:24259 commitMutationEffectsOnFiber @ react-dom.development.js:24432 commitMutationEffects @ react-dom.development.js:24243 commitRootImpl @ react-dom.development.js:26810 commitRoot @ react-dom.development.js:26682 performSyncWorkOnRoot @ react-dom.development.js:26117 flushSyncCallbacks @ react-dom.development.js:12042 flushPassiveEffectsImpl @ react-dom.development.js:27060 flushPassiveEffects @ react-dom.development.js:26984 (anonymous) @ react-dom.development.js:26769 workLoop @ scheduler.development.js:266 flushWork @ scheduler.development.js:239 performWorkUntilDeadline @ scheduler.development.js:533 react-dom.development.js:18687 The above error occurred in the component: at Stage (http://localhost:3000/static/js/bundle.js:28657:5) at MasksComponent (http://localhost:3000/static/js/bundle.js:116:64) at App (http://localhost:3000/static/js/bundle.js:34:78)

Consider adding an error boundary to your tree to customize error handling behavior. Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries. logCapturedError @ react-dom.development.js:18687 update.callback @ react-dom.development.js:18720 callCallback @ react-dom.development.js:13923 commitUpdateQueue @ react-dom.development.js:13944 commitLayoutEffectOnFiber @ react-dom.development.js:23391 commitLayoutMountEffects_complete @ react-dom.development.js:24688 commitLayoutEffects_begin @ react-dom.development.js:24674 commitLayoutEffects @ react-dom.development.js:24612 commitRootImpl @ react-dom.development.js:26823 commitRoot @ react-dom.development.js:26682 performSyncWorkOnRoot @ react-dom.development.js:26117 flushSyncCallbacks @ react-dom.development.js:12042 flushPassiveEffectsImpl @ react-dom.development.js:27060 flushPassiveEffects @ react-dom.development.js:26984 (anonymous) @ react-dom.development.js:26769 workLoop @ scheduler.development.js:266 flushWork @ scheduler.development.js:239 performWorkUntilDeadline @ scheduler.development.js:533

checkMaxIfStatementsInShader.ts:36 Uncaught Error: Invalid value of 0 passed to checkMaxIfStatementsInShader at checkMaxIfStatementsInShader (checkMaxIfStatementsInShader.ts:36:1) at AbstractBatchRenderer.contextChange (AbstractBatchRenderer.ts:254:1) at Runner.emit (Runner.ts:81:1) at ContextSystem.initFromContext (ContextSystem.ts:111:1) at ContextSystem.initFromOptions (ContextSystem.ts:124:1) at new Renderer (Renderer.ts:310:1) at Renderer.create (Renderer.ts:223:1) at autoDetectRenderer (autoDetectRenderer.ts:41:1) at new Application (Application.ts:104:1) at Stage.componentDidMount (index.js:115:1) checkMaxIfStatementsInShader @ checkMaxIfStatementsInShader.ts:36 AbstractBatchRenderer.contextChange @ AbstractBatchRenderer.ts:254 Runner.emit @ Runner.ts:81 ContextSystem.initFromContext @ ContextSystem.ts:111 ContextSystem.initFromOptions @ ContextSystem.ts:124 Renderer @ Renderer.ts:310 Renderer.create @ Renderer.ts:223 autoDetectRenderer @ autoDetectRenderer.ts:41 Application @ Application.ts:104 componentDidMount @ index.js:115 invokeLayoutEffectMountInDEV @ react-dom.development.js:25133 invokeEffectsInDev @ react-dom.development.js:27351 commitDoubleInvokeEffectsInDEV @ react-dom.development.js:27327 flushPassiveEffectsImpl @ react-dom.development.js:27056 flushPassiveEffects @ react-dom.development.js:26984 (anonymous) @ react-dom.development.js:26769 workLoop @ scheduler.development.js:266 flushWork @ scheduler.development.js:239 performWorkUntilDeadline @ scheduler.development.js:533 react-dom.development.js:18687 The above error occurred in the component: at Stage (http://localhost:3000/static/js/bundle.js:28657:5) at MasksComponent (http://localhost:3000/static/js/bundle.js:116:64) at App (http://localhost:3000/static/js/bundle.js:34:78)

Consider adding an error boundary to your tree to customize error handling behavior. Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries. logCapturedError @ react-dom.development.js:18687 update.callback @ react-dom.development.js:18720 callCallback @ react-dom.development.js:13923 commitUpdateQueue @ react-dom.development.js:13944 commitLayoutEffectOnFiber @ react-dom.development.js:23391 commitLayoutMountEffects_complete @ react-dom.development.js:24688 commitLayoutEffects_begin @ react-dom.development.js:24674 commitLayoutEffects @ react-dom.development.js:24612 commitRootImpl @ react-dom.development.js:26823 commitRoot @ react-dom.development.js:26682 performSyncWorkOnRoot @ react-dom.development.js:26117 flushSyncCallbacks @ react-dom.development.js:12042 (anonymous) @ react-dom.development.js:25651

index.js:239 Uncaught TypeError: Cannot read properties of null (reading 'off') at Stage.componentWillUnmount (index.js:239:1) at callComponentWillUnmountWithTimer (react-dom.development.js:22852:1) at safelyCallComponentWillUnmount (react-dom.development.js:22873:1) at commitDeletionEffectsOnFiber (react-dom.development.js:24129:1) at recursivelyTraverseDeletionEffects (react-dom.development.js:23989:1) at commitDeletionEffectsOnFiber (react-dom.development.js:24118:1) at recursivelyTraverseDeletionEffects (react-dom.development.js:23989:1) at commitDeletionEffectsOnFiber (react-dom.development.js:24118:1) at recursivelyTraverseDeletionEffects (react-dom.development.js:23989:1) at commitDeletionEffectsOnFiber (react-dom.development.js:24170:1)

• @inlet/react-pixi version: ^6.8.0
• React version: ^18.2.0
• ReactDOM version: ^18.2.0
• PIXI version: ^6.5.2

[saitonakamura]

@GorgeousPuree first of all, if you're using react 18, you should use beta version from #338 (@saitonakamura/react-pixi@7.0.0-beta-5 is the latest one currently). Secondly, we experienced this issue when pixi asked to create and destroy 2 apps in quick succession (which happens in strict mode), more info here

https://github.com/inlet/react-pixi/pull/338#issuecomment-1203170876

Not sure how devtools are affecting it though

[GorgeousPuree]

@saitonakamura I see, didn't know about the beta version, so I downgraded react to 17th version. Haven't found out how dev tools affecting it too.

[ggomaeng]

I'm using Next.js with react 18, and turning off strict mode helped for me!

const nextConfig = {
  reactStrictMode: false,
  swcMinify: true
};

[steviegt6]

I'm using Next.js with react 18, and turning off strict mode helped for me!

const nextConfig = {
  reactStrictMode: false,
  swcMinify: true
};

Using the latest alpha (@pixi/react@7.0.01-alpha.1, notably not @saitonakamura/react-pixi) and was facing the same issue (albeit indiscriminate of devtools, on Firefox), the above solution works for me as well.

[lunarraid]

Closing this as there seems to be a workaround for those encountering it. If it's still an issue, we can reopen it.