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

Bug: Deprecation Warning: renderer.plugins.interaction has been deprecated, use renderer.events

Open ben4d85 opened this issue 2 years ago • 9 comments

Current Behavior

When using pixi-react 7.1.0 with pixi.js 7.2.4, the following deprecation warning is logged to the console:

PixiJS Deprecation Warning: renderer.plugins.interaction has been deprecated, use renderer.events Deprecated since v7.0.0

Expected Behavior

No deprecation warning should be logged to the console.

Steps to Reproduce

n/a

Environment

  • pixi.js: 7.2.4
  • pixi-viewport: 5.0.1
  • @pixi/react: 7.1.0
  • react: 18.2.0
  • react-dom: 18.2.0
  • next: 13.4.3
  • typescript: 5.0.4

Possible Solution

In the pixi-react codebase, look for occurrences of renderer.plugins.interaction and modify them to use renderer.events instead. Similarly, address any usage of InteractionManager.

For context about the underlying change in pixi.js, see https://github.com/pixijs/pixijs/pull/8425.

Additional Information

Full stack trace:

PixiJS Deprecation Warning:
renderer.plugins.interaction has been deprecated, use renderer.events
Deprecated since v7.0.0

    at Stage.resetInteractionManager (webpack-internal:///(app-client)/./node_modules/@pixi/react/dist/index.es-dev.js:23980:56)
    at Stage.eval [as updateSize] (webpack-internal:///(app-client)/./node_modules/@pixi/react/dist/index.es-dev.js:23869:15)
    at Stage.componentDidMount (webpack-internal:///(app-client)/./node_modules/@pixi/react/dist/index.es-dev.js:23935:12)
    at reappearLayoutEffects (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:21920:22)
    at recursivelyTraverseReappearLayoutEffects (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:22024:5)
    at reappearLayoutEffects (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:21954:9)
    at recursivelyTraverseReappearLayoutEffects (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:22024:5)
    at reappearLayoutEffects (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:21906:9)
    at recursivelyTraverseReappearLayoutEffects (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:22024:5)
    at reappearLayoutEffects (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:21906:9)
    at recursivelyTraverseReappearLayoutEffects (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:22024:5)
    at commitLayoutEffectOnFiber (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:20428:15)
    at recursivelyTraverseLayoutEffects (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:21808:7)
    at commitLayoutEffectOnFiber (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:20396:9)
    at recursivelyTraverseLayoutEffects (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:21808:7)
    at commitLayoutEffectOnFiber (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:20285:9)
    at recursivelyTraverseLayoutEffects (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:21808:7)
    at commitLayoutEffectOnFiber (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:20296:9)
    at recursivelyTraverseLayoutEffects (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:21808:7)
    at commitLayoutEffectOnFiber (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:20366:9)
    at recursivelyTraverseLayoutEffects (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:21808:7)
    at commitLayoutEffectOnFiber (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:20285:9)
    at recursivelyTraverseLayoutEffects (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:21808:7)
    at commitLayoutEffectOnFiber (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:20455:9)
    at recursivelyTraverseLayoutEffects (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:21808:7)
    at commitLayoutEffectOnFiber (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:20285:9)
    at recursivelyTraverseLayoutEffects (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:21808:7)
    at commitLayoutEffectOnFiber (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:20296:9)
    at recursivelyTraverseLayoutEffects (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:21808:7)
    at commitLayoutEffectOnFiber (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:20285:9)
    at recursivelyTraverseLayoutEffects (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:21808:7)
    at commitLayoutEffectOnFiber (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:20285:9)
    at recursivelyTraverseLayoutEffects (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:21808:7)
    at commitLayoutEffectOnFiber (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:20285:9)
    at recursivelyTraverseLayoutEffects (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:21808:7)
    at commitLayoutEffectOnFiber (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:20285:9)
    at recursivelyTraverseLayoutEffects (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:21808:7)
    at commitLayoutEffectOnFiber (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:20296:9)
    at recursivelyTraverseLayoutEffects (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:21808:7)
    at commitLayoutEffectOnFiber (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:20285:9)
    at recursivelyTraverseLayoutEffects (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:21808:7)
    at commitLayoutEffectOnFiber (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:20285:9)
    at recursivelyTraverseLayoutEffects (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:21808:7)
    at commitLayoutEffectOnFiber (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:20455:9)
    at recursivelyTraverseLayoutEffects (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:21808:7)
    at commitLayoutEffectOnFiber (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:20455:9)
    at recursivelyTraverseLayoutEffects (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:21808:7)
    at commitLayoutEffectOnFiber (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:20285:9)
    overrideMethod	@	console.js:213
    deprecation	@	deprecation.mjs:15
    get	@	PluginSystem.mjs:26
    resetInteractionManager	@	index.es-dev.js:23931
    eval	@	index.es-dev.js:23820
    componentDidMount	@	index.es-dev.js:23886
    reappearLayoutEffects	@	react-dom.development.js:21920
    recursivelyTraverseReappearLayoutEffects	@	react-dom.development.js:22024
    reappearLayoutEffects	@	react-dom.development.js:21954
    recursivelyTraverseReappearLayoutEffects	@	react-dom.development.js:22024
    reappearLayoutEffects	@	react-dom.development.js:21906
    recursivelyTraverseReappearLayoutEffects	@	react-dom.development.js:22024
    reappearLayoutEffects	@	react-dom.development.js:21906
    recursivelyTraverseReappearLayoutEffects	@	react-dom.development.js:22024
    commitLayoutEffectOnFiber	@	react-dom.development.js:20428
    recursivelyTraverseLayoutEffects	@	react-dom.development.js:21808
    commitLayoutEffectOnFiber	@	react-dom.development.js:20396
    recursivelyTraverseLayoutEffects	@	react-dom.development.js:21808
    commitLayoutEffectOnFiber	@	react-dom.development.js:20285
    recursivelyTraverseLayoutEffects	@	react-dom.development.js:21808
    commitLayoutEffectOnFiber	@	react-dom.development.js:20296
    recursivelyTraverseLayoutEffects	@	react-dom.development.js:21808
    commitLayoutEffectOnFiber	@	react-dom.development.js:20366
    recursivelyTraverseLayoutEffects	@	react-dom.development.js:21808
    commitLayoutEffectOnFiber	@	react-dom.development.js:20285
    recursivelyTraverseLayoutEffects	@	react-dom.development.js:21808
    commitLayoutEffectOnFiber	@	react-dom.development.js:20455
    recursivelyTraverseLayoutEffects	@	react-dom.development.js:21808
    commitLayoutEffectOnFiber	@	react-dom.development.js:20285
    recursivelyTraverseLayoutEffects	@	react-dom.development.js:21808
    commitLayoutEffectOnFiber	@	react-dom.development.js:20296
    recursivelyTraverseLayoutEffects	@	react-dom.development.js:21808
    commitLayoutEffectOnFiber	@	react-dom.development.js:20285
    recursivelyTraverseLayoutEffects	@	react-dom.development.js:21808
    commitLayoutEffectOnFiber	@	react-dom.development.js:20285
    recursivelyTraverseLayoutEffects	@	react-dom.development.js:21808
    commitLayoutEffectOnFiber	@	react-dom.development.js:20285
    recursivelyTraverseLayoutEffects	@	react-dom.development.js:21808
    commitLayoutEffectOnFiber	@	react-dom.development.js:20285
    recursivelyTraverseLayoutEffects	@	react-dom.development.js:21808
    commitLayoutEffectOnFiber	@	react-dom.development.js:20296
    recursivelyTraverseLayoutEffects	@	react-dom.development.js:21808
    commitLayoutEffectOnFiber	@	react-dom.development.js:20285
    recursivelyTraverseLayoutEffects	@	react-dom.development.js:21808
    commitLayoutEffectOnFiber	@	react-dom.development.js:20285
    recursivelyTraverseLayoutEffects	@	react-dom.development.js:21808
    commitLayoutEffectOnFiber	@	react-dom.development.js:20455
    recursivelyTraverseLayoutEffects	@	react-dom.development.js:21808
    commitLayoutEffectOnFiber	@	react-dom.development.js:20455
    recursivelyTraverseLayoutEffects	@	react-dom.development.js:21808
    commitLayoutEffectOnFiber	@	react-dom.development.js:20285
    recursivelyTraverseLayoutEffects	@	react-dom.development.js:21808
    commitLayoutEffectOnFiber	@	react-dom.development.js:20455
    recursivelyTraverseLayoutEffects	@	react-dom.development.js:21808
    commitLayoutEffectOnFiber	@	react-dom.development.js:20285
    recursivelyTraverseLayoutEffects	@	react-dom.development.js:21808
    commitLayoutEffectOnFiber	@	react-dom.development.js:20296
    recursivelyTraverseLayoutEffects	@	react-dom.development.js:21808
    commitLayoutEffectOnFiber	@	react-dom.development.js:20285
    recursivelyTraverseLayoutEffects	@	react-dom.development.js:21808
    commitLayoutEffectOnFiber	@	react-dom.development.js:20285
    recursivelyTraverseLayoutEffects	@	react-dom.development.js:21808
    commitLayoutEffectOnFiber	@	react-dom.development.js:20285
    recursivelyTraverseLayoutEffects	@	react-dom.development.js:21808
    commitLayoutEffectOnFiber	@	react-dom.development.js:20285
    recursivelyTraverseLayoutEffects	@	react-dom.development.js:21808
    commitLayoutEffectOnFiber	@	react-dom.development.js:20296
    recursivelyTraverseLayoutEffects	@	react-dom.development.js:21808
    commitLayoutEffectOnFiber	@	react-dom.development.js:20285
    recursivelyTraverseLayoutEffects	@	react-dom.development.js:21808
    commitLayoutEffectOnFiber	@	react-dom.development.js:20285
    recursivelyTraverseLayoutEffects	@	react-dom.development.js:21808
    commitLayoutEffectOnFiber	@	react-dom.development.js:20455
    recursivelyTraverseLayoutEffects	@	react-dom.development.js:21808
    commitLayoutEffectOnFiber	@	react-dom.development.js:20455
    recursivelyTraverseLayoutEffects	@	react-dom.development.js:21808
    commitLayoutEffectOnFiber	@	react-dom.development.js:20285
    recursivelyTraverseLayoutEffects	@	react-dom.development.js:21808
    commitLayoutEffectOnFiber	@	react-dom.development.js:20455
    recursivelyTraverseLayoutEffects	@	react-dom.development.js:21808
    commitLayoutEffectOnFiber	@	react-dom.development.js:20285
    recursivelyTraverseLayoutEffects	@	react-dom.development.js:21808
    commitLayoutEffectOnFiber	@	react-dom.development.js:20285
    recursivelyTraverseLayoutEffects	@	react-dom.development.js:21808
    commitLayoutEffectOnFiber	@	react-dom.development.js:20285
    recursivelyTraverseLayoutEffects	@	react-dom.development.js:21808
    commitLayoutEffectOnFiber	@	react-dom.development.js:20366
    recursivelyTraverseLayoutEffects	@	react-dom.development.js:21808
    commitLayoutEffectOnFiber	@	react-dom.development.js:20366
    recursivelyTraverseLayoutEffects	@	react-dom.development.js:21808
    commitLayoutEffectOnFiber	@	react-dom.development.js:20366
    recursivelyTraverseLayoutEffects	@	react-dom.development.js:21808
    commitLayoutEffectOnFiber	@	react-dom.development.js:20455
    recursivelyTraverseLayoutEffects	@	react-dom.development.js:21808
    commitLayoutEffectOnFiber	@	react-dom.development.js:20285
    recursivelyTraverseLayoutEffects	@	react-dom.development.js:21808
    commitLayoutEffectOnFiber	@	react-dom.development.js:20296
    recursivelyTraverseLayoutEffects	@	react-dom.development.js:21808
    commitLayoutEffectOnFiber	@	react-dom.development.js:20285
    recursivelyTraverseLayoutEffects	@	react-dom.development.js:21808
    commitLayoutEffectOnFiber	@	react-dom.development.js:20285
    recursivelyTraverseLayoutEffects	@	react-dom.development.js:21808
    commitLayoutEffectOnFiber	@	react-dom.development.js:20285
    recursivelyTraverseLayoutEffects	@	react-dom.development.js:21808
    commitLayoutEffectOnFiber	@	react-dom.development.js:20285
    recursivelyTraverseLayoutEffects	@	react-dom.development.js:21808
    commitLayoutEffectOnFiber	@	react-dom.development.js:20296
    recursivelyTraverseLayoutEffects	@	react-dom.development.js:21808
    commitLayoutEffectOnFiber	@	react-dom.development.js:20285
    recursivelyTraverseLayoutEffects	@	react-dom.development.js:21808
    commitLayoutEffectOnFiber	@	react-dom.development.js:20285
    recursivelyTraverseLayoutEffects	@	react-dom.development.js:21808
    commitLayoutEffectOnFiber	@	react-dom.development.js:20455
    recursivelyTraverseLayoutEffects	@	react-dom.development.js:21808
    commitLayoutEffectOnFiber	@	react-dom.development.js:20455
    recursivelyTraverseLayoutEffects	@	react-dom.development.js:21808
    commitLayoutEffectOnFiber	@	react-dom.development.js:20285
    recursivelyTraverseLayoutEffects	@	react-dom.development.js:21808
    commitLayoutEffectOnFiber	@	react-dom.development.js:20296
    recursivelyTraverseLayoutEffects	@	react-dom.development.js:21808
    commitLayoutEffectOnFiber	@	react-dom.development.js:20285
    recursivelyTraverseLayoutEffects	@	react-dom.development.js:21808
    commitLayoutEffectOnFiber	@	react-dom.development.js:20296
    recursivelyTraverseLayoutEffects	@	react-dom.development.js:21808
    commitLayoutEffectOnFiber	@	react-dom.development.js:20285
    recursivelyTraverseLayoutEffects	@	react-dom.development.js:21808
    commitLayoutEffectOnFiber	@	react-dom.development.js:20285
    recursivelyTraverseLayoutEffects	@	react-dom.development.js:21808
    commitLayoutEffectOnFiber	@	react-dom.development.js:20455
    recursivelyTraverseLayoutEffects	@	react-dom.development.js:21808
    commitLayoutEffectOnFiber	@	react-dom.development.js:20455
    recursivelyTraverseLayoutEffects	@	react-dom.development.js:21808
    commitLayoutEffectOnFiber	@	react-dom.development.js:20455
    recursivelyTraverseLayoutEffects	@	react-dom.development.js:21808
    commitLayoutEffectOnFiber	@	react-dom.development.js:20455
    recursivelyTraverseLayoutEffects	@	react-dom.development.js:21808
    commitLayoutEffectOnFiber	@	react-dom.development.js:20455
    recursivelyTraverseLayoutEffects	@	react-dom.development.js:21808
    commitLayoutEffectOnFiber	@	react-dom.development.js:20285
    recursivelyTraverseLayoutEffects	@	react-dom.development.js:21808
    commitLayoutEffectOnFiber	@	react-dom.development.js:20296
    recursivelyTraverseLayoutEffects	@	react-dom.development.js:21808
    commitLayoutEffectOnFiber	@	react-dom.development.js:20285
    recursivelyTraverseLayoutEffects	@	react-dom.development.js:21808
    commitLayoutEffectOnFiber	@	react-dom.development.js:20285
    recursivelyTraverseLayoutEffects	@	react-dom.development.js:21808
    commitLayoutEffectOnFiber	@	react-dom.development.js:20285
    recursivelyTraverseLayoutEffects	@	react-dom.development.js:21808
    commitLayoutEffectOnFiber	@	react-dom.development.js:20285
    recursivelyTraverseLayoutEffects	@	react-dom.development.js:21808
    commitLayoutEffectOnFiber	@	react-dom.development.js:20285
    recursivelyTraverseLayoutEffects	@	react-dom.development.js:21808
    commitLayoutEffectOnFiber	@	react-dom.development.js:20455
    recursivelyTraverseLayoutEffects	@	react-dom.development.js:21808
    commitLayoutEffectOnFiber	@	react-dom.development.js:20315
    commitLayoutEffects	@	react-dom.development.js:21794
    commitRootImpl	@	react-dom.development.js:25007
    commitRoot	@	react-dom.development.js:24860
    commitRootWhenReady	@	react-dom.development.js:23598
    finishConcurrentRender	@	react-dom.development.js:23563
    performConcurrentWorkOnRoot	@	react-dom.development.js:23411
    workLoop	@	scheduler.development.js:261
    flushWork	@	scheduler.development.js:230
    performWorkUntilDeadline	@	scheduler.development.js:537

ben4d85 avatar Jul 26 '23 10:07 ben4d85

@inlet any ideas?

x8er avatar Aug 23 '23 07:08 x8er

Hi @ben4d85, I haven't been working on this project since a long time. I think best to ask somewhere from the Pixi team that can help you with this.

Cheers, Patrick

inlet avatar Aug 24 '23 12:08 inlet

I believe the warning is from this line,

https://github.com/pixijs/pixi-react/blob/ab3a672af3f589b4e2cdb24024e534b8145d7942/packages/react/src/stage/index.js#L272C1-L272C77

maybe we can ignore this because it has provide support for Pixi v6 still on the top of this function

rnike avatar Aug 31 '23 08:08 rnike

@Zyie Any update on this issue? Still having this in @pixi/react 7.1.1.. Here is the pixi react warning: PixiJS Deprecation Warning: renderer.plugins.interaction has been deprecated, use renderer.events Deprecated since v7.0.0

avpeery avatar Jan 03 '24 03:01 avpeery

I'm encountering this same issue in @pixi/react 7.1.2. Exact same error message.

oneirocosm avatar Apr 14 '24 01:04 oneirocosm

Maybe the warning is coming from this code accessing this.app.renderer.plugins.interaction?

(and then checking if this.app.renderer.plugins.interaction.resolution is there)

https://github.com/pixijs/pixi-react/blob/master/packages/react/src/stage/index.js#L269

afarber avatar Apr 17 '24 19:04 afarber

Any updates on this? I got the same warning with: pixi.js 8.1.0 and @pixi@react 7.1.2

didoslavov avatar May 25 '24 21:05 didoslavov

Dear pixi dev team, I am facing same warning. I am using "@pixi/react": "^7.1.0" and "pixi.js": "^7.2.4" in react 18.2.0 and see warning from console like this

PixiJS Deprecation Warning: renderer.plugins.interaction has been deprecated, use renderer.eventsDeprecated since v7.0.0

How can I fix it?

aputy avatar Aug 12 '24 07:08 aputy