search

pixijs / pixi-react

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

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

Open ben4d85 opened 1 year ago

ben4d85 commented 1 year ago

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

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
x8er commented 1 year ago

@inlet any ideas?

inlet commented 1 year ago

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

rnike commented 1 year ago

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

avpeery commented 10 months ago

@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

oneirocosm commented 6 months ago

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

afarber commented 6 months ago

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

didoslavov commented 5 months ago

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

aputy commented 2 months ago

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?

braveltd commented 1 month ago

Please fix, it's easy.