Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
ben4d85 opened this issue Jul 26, 2023 · 9 comments
Open

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

ben4d85 opened this issue Jul 26, 2023 · 9 comments
Labels
bug Something isn't working v7 Issues related to Pixi React v7

Comments

@ben4d85
Copy link

ben4d85 commented Jul 26, 2023 •
edited
Loading

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
@x8er
Copy link

x8er commented Aug 23, 2023

@inlet any ideas?

@inlet
Copy link
Collaborator

inlet commented Aug 24, 2023

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
Copy link

rnike commented Aug 31, 2023 •
edited
Loading

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
Copy link

avpeery commented Jan 3, 2024 •
edited
Loading

@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
Copy link

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

@afarber
Copy link

afarber commented Apr 17, 2024

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
Copy link

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

@trezy trezy added v7 Issues related to Pixi React v7 bug Something isn't working labels Jun 15, 2024
@aputy
Copy link

aputy commented Aug 12, 2024

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
Copy link

Please fix, it's easy.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working v7 Issues related to Pixi React v7
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests