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

ben4d85 · 2023-07-26T10:44:51Z

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 pixijs/pixijs#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

The text was updated successfully, but these errors were encountered:

x8er · 2023-08-23T07:25:30Z

@inlet any ideas?

inlet · 2023-08-24T12:28:12Z

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 · 2023-08-31T08:13:50Z

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 · 2024-01-03T03:38:51Z

@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 · 2024-04-14T01:43:47Z

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

afarber · 2024-04-17T19:50:53Z

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 · 2024-05-25T21:30:58Z

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

ben4d85 commented Jul 26, 2023 •

edited

x8er commented Aug 23, 2023

inlet commented Aug 24, 2023

rnike commented Aug 31, 2023 •

edited

avpeery commented Jan 3, 2024 •

edited

oneirocosm commented Apr 14, 2024

afarber commented Apr 17, 2024

didoslavov commented May 25, 2024

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

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

Comments

ben4d85 commented Jul 26, 2023 • edited

Current Behavior

Expected Behavior

Steps to Reproduce

Environment

Possible Solution

Additional Information

x8er commented Aug 23, 2023

inlet commented Aug 24, 2023

rnike commented Aug 31, 2023 • edited

avpeery commented Jan 3, 2024 • edited

oneirocosm commented Apr 14, 2024

afarber commented Apr 17, 2024

didoslavov commented May 25, 2024

ben4d85 commented Jul 26, 2023 •

edited

rnike commented Aug 31, 2023 •

edited

avpeery commented Jan 3, 2024 •

edited