pixi-react icon indicating copy to clipboard operation
pixi-react copied to clipboard
verified publisher icon pixijs

Bug: Crash with custom component 7.1.0

Open snatvb opened this issue 2 years ago • 2 comments

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

  • @pixi/react version: 7.1.0
  • pixi.js version: 7.2.4
  • React version: 18.2.0
  • ReactDOM version: 18.2.0

Possible Solution

No response

Additional Information

No response

snatvb avatar Jul 08 '23 05:07 snatvb

Here child is undefined: image image stateNode should be Graphics

snatvb avatar Jul 08 '23 05:07 snatvb

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

snatvb avatar Jul 08 '23 07:07 snatvb