search

pixijs / pixi-react

Write PIXI apps using React declarative style
https://pixijs.io/pixi-react/
MIT License
2.25k stars 173 forks source link

Bug: Crash with custom component 7.1.0 #448

Open snatvb opened 1 year ago

snatvb commented 1 year ago

Current Behavior

Crash by null pointers:

index.es-dev.js:15945 Uncaught TypeError: Cannot read properties of undefined (reading 'parent')
    at _Container.addChild (webpack-internal:///(app-client)/../../node_modules/@pixi/display/lib/Container.mjs:33:17)
    at _appendChild (webpack-internal:///(app-client)/../../packages/operation-space/node_modules/@pixi/react/dist/index.es-dev.js:23270:12)
    at appendChildToContainer (webpack-internal:///(app-client)/../../packages/operation-space/node_modules/@pixi/react/dist/index.es-dev.js:23462:28)
    at insertOrAppendPlacementNodeIntoContainer (webpack-internal:///(app-client)/../../packages/operation-space/node_modules/@pixi/react/dist/index.es-dev.js:17041:8)
    at insertOrAppendPlacementNodeIntoContainer (webpack-internal:///(app-client)/../../packages/operation-space/node_modules/@pixi/react/dist/index.es-dev.js:17047:8)
    at insertOrAppendPlacementNodeIntoContainer (webpack-internal:///(app-client)/../../packages/operation-space/node_modules/@pixi/react/dist/index.es-dev.js:17051:10)
    at insertOrAppendPlacementNodeIntoContainer (webpack-internal:///(app-client)/../../packages/operation-space/node_modules/@pixi/react/dist/index.es-dev.js:17047:8)
    at commitPlacement (webpack-internal:///(app-client)/../../packages/operation-space/node_modules/@pixi/react/dist/index.es-dev.js:17021:10)
    at commitReconciliationEffects (webpack-internal:///(app-client)/../../packages/operation-space/node_modules/@pixi/react/dist/index.es-dev.js:17793:8)
    at commitMutationEffectsOnFiber (webpack-internal:///(app-client)/../../packages/operation-space/node_modules/@pixi/react/dist/index.es-dev.js:17779:10)
    at recursivelyTraverseMutationEffects (webpack-internal:///(app-client)/../../packages/operation-space/node_modules/@pixi/react/dist/index.es-dev.js:17450:8)
    at commitMutationEffectsOnFiber (webpack-internal:///(app-client)/../../packages/operation-space/node_modules/@pixi/react/dist/index.es-dev.js:17609:10)
    at commitMutationEffects (webpack-internal:///(app-client)/../../packages/operation-space/node_modules/@pixi/react/dist/index.es-dev.js:17420:4)
    at commitRootImpl (webpack-internal:///(app-client)/../../packages/operation-space/node_modules/@pixi/react/dist/index.es-dev.js:20471:6)
    at commitRoot (webpack-internal:///(app-client)/../../packages/operation-space/node_modules/@pixi/react/dist/index.es-dev.js:20343:6)
    at performSyncWorkOnRoot (webpack-internal:///(app-client)/../../packages/operation-space/node_modules/@pixi/react/dist/index.es-dev.js:19744:4)
    at flushSyncCallbacks (webpack-internal:///(app-client)/../../packages/operation-space/node_modules/@pixi/react/dist/index.es-dev.js:4468:23)
    at eval (webpack-internal:///(app-client)/../../packages/operation-space/node_modules/@pixi/react/dist/index.es-dev.js:19275:14)
Uncaught TypeError: Cannot read properties of undefined (reading 'willUnmount')
    at willUnmountRecursive (webpack-internal:///(app-client)/../../packages/operation-space/node_modules/@pixi/react/dist/index.es-dev.js:23278:31)
    at _removeChild (webpack-internal:///(app-client)/../../packages/operation-space/node_modules/@pixi/react/dist/index.es-dev.js:23291:3)
    at removeChildFromContainer (webpack-internal:///(app-client)/../../packages/operation-space/node_modules/@pixi/react/dist/index.es-dev.js:23484:28)
    at commitDeletionEffectsOnFiber (webpack-internal:///(app-client)/../../packages/operation-space/node_modules/@pixi/react/dist/index.es-dev.js:17195:16)
    at recursivelyTraverseDeletionEffects (webpack-internal:///(app-client)/../../packages/operation-space/node_modules/@pixi/react/dist/index.es-dev.js:17158:6)
    at commitDeletionEffectsOnFiber (webpack-internal:///(app-client)/../../packages/operation-space/node_modules/@pixi/react/dist/index.es-dev.js:17292:10)
    at recursivelyTraverseDeletionEffects (webpack-internal:///(app-client)/../../packages/operation-space/node_modules/@pixi/react/dist/index.es-dev.js:17158:6)
    at commitDeletionEffectsOnFiber (webpack-internal:///(app-client)/../../packages/operation-space/node_modules/@pixi/react/dist/index.es-dev.js:17344:10)
    at recursivelyTraverseDeletionEffects (webpack-internal:///(app-client)/../../packages/operation-space/node_modules/@pixi/react/dist/index.es-dev.js:17158:6)
    at commitDeletionEffectsOnFiber (webpack-internal:///(app-client)/../../packages/operation-space/node_modules/@pixi/react/dist/index.es-dev.js:17344:10)
    at commitDeletionEffects (webpack-internal:///(app-client)/../../packages/operation-space/node_modules/@pixi/react/dist/index.es-dev.js:17142:6)
    at recursivelyTraverseMutationEffects (webpack-internal:///(app-client)/../../packages/operation-space/node_modules/@pixi/react/dist/index.es-dev.js:17436:10)
    at commitMutationEffectsOnFiber (webpack-internal:///(app-client)/../../packages/operation-space/node_modules/@pixi/react/dist/index.es-dev.js:17609:10)
    at commitMutationEffects (webpack-internal:///(app-client)/../../packages/operation-space/node_modules/@pixi/react/dist/index.es-dev.js:17420:4)
    at commitRootImpl (webpack-internal:///(app-client)/../../packages/operation-space/node_modules/@pixi/react/dist/index.es-dev.js:20471:6)
    at commitRoot (webpack-internal:///(app-client)/../../packages/operation-space/node_modules/@pixi/react/dist/index.es-dev.js:20343:6)
    at performSyncWorkOnRoot (webpack-internal:///(app-client)/../../packages/operation-space/node_modules/@pixi/react/dist/index.es-dev.js:19744:4)
    at flushSyncCallbacks (webpack-internal:///(app-client)/../../packages/operation-space/node_modules/@pixi/react/dist/index.es-dev.js:4468:23)
    at eval (webpack-internal:///(app-client)/../../packages/operation-space/node_modules/@pixi/react/dist/index.es-dev.js:19275:14)

Breakpoint:

image

Expected Behavior

No crash

Steps to Reproduce

Custom component:

import { PixiComponent } from '@pixi/react'

import { PIXI } from '../dependencies'

export type RectangleProps = {
  fill: number
  width: number
  height: number
  x?: number
  y?: number
  anchor?: number
  blendMode?: PIXI.BLEND_MODES
  alpha?: number
}

export const Rectangle = PixiComponent<RectangleProps, PIXI.Graphics>(
  'Rectangle',
  {
    config: {
      destroyChildren: false,
      destroy: true,
    },
    create: () => new PIXI.Graphics(),
    applyProps(instance, oldProps, newProps) {
      const { fill, x = 0, y = 0, width, height, anchor } = newProps
      if (
        oldProps.fill !== fill ||
        oldProps.width !== width ||
        oldProps.height !== height ||
        oldProps.x !== x ||
        oldProps.y !== y
      ) {
        instance.clear()
        instance.beginFill(fill)
        instance.drawRect(x, y, width, height)
        instance.endFill()
      }
      if (anchor !== undefined && oldProps.anchor !== anchor) {
        instance.pivot.set(width * anchor, height * anchor)
      }
      instance.alpha = newProps.alpha ?? 1
      instance.blendMode = newProps.blendMode ?? PIXI.BLEND_MODES.NORMAL
    },
  },
)

Environment

Possible Solution

No response

Additional Information

No response

snatvb commented 1 year ago

Here child is undefined:

image image

stateNode should be Graphics

snatvb commented 1 year ago

It happened because I had in monorepo(turborepo) @react/pixi in package and app (in package devDeps, in apps just deps) and it leads to error (I confused) Interesting that v7.0.3 didn't lead to this crash