Detected multiple renderers rendering the same context provider

When I use multiple PaperContainers (in multiple components), I get this warning:

Warning: Detected multiple renderers concurrently rendering the same context provider. This is currently unsupported.

Other than that everything works as expected, but this warning is logged a ton.

Any ideas?
Thank you so much!

[psychobolt]

Currently, react-reconciler framework is meant to support only 1 context per renderer otherwise you may have unexpected behavior when you need access to the PaperScope. Fortunately the paper renderer holds a reference to this without the context, so it should render fine. Possibly the best way to handle this is to have the option to create your own context or have a no-context mode.

If you need access to the context you can have each renderer in a seperate <iframe>. I don't actually like this approach, but right now that's the only workaround. it will also suppress the warning.

Thanks so much for the swift response!

I have one <PaperContainer> where I access the scope using renderWithScope(), all the other instances are fairly basic, rendering only one <Path> in one container each (to create a long list of paths). By having each renderer in a separate <iframe>, do you mean literally making separate react apps or is there some way to just put the renderer / container in an iFrame? I tried the latter (using react-frame-component), but the warnings just kept coming.

[psychobolt]

At the moment, it seems you would need load react-paperjs in isolation (code-split if possible) for each iFrame. Which is the reason why I didn't prefer that approach, hence you will be going to the route of making separate react apps or slowing down the load/render time of your app.

Ok, thanks for the info! Everything is working wonderfully, so I'll leave it like that.

[paulodeon]

I have a related issue - happy to create a new issue if you think it's not related.

I get the same warning:

Warning: Detected multiple renderers concurrently rendering the same context provider. This is currently unsupported.
at PaperContainer (http://localhost:3000/packs/js/onboarding-4823dfbab64f78d8c517.js:35410:5)
at PaperProvider (http://localhost:3000/packs/js/onboarding-4823dfbab64f78d8c517.js:35341:7)
at div
at Resizable (http://localhost:3000/packs/js/onboarding-4823dfbab64f78d8c517.js:86733:24)
at QueryClientProvider (http://localhost:3000/packs/js/onboarding-4823dfbab64f78d8c517.js:126768:21)
at AppCanvas (http://localhost:3000/packs/js/onboarding-4823dfbab64f78d8c517.js:251:30)
at QueryClientProvider (http://localhost:3000/packs/js/onboarding-4823dfbab64f78d8c517.js:126768:21)
at App

But there's a different context. Basically I am mounting the react component on the page, un mounting it, then remounting it. Then I get the above message.

I also have got the following messages ( in case they are helpful):

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

react_devtools_backend.js:2430 Could not find Fiber with id "39"

If I were to guess I would say there is some kind of cleanup not taking place on unmount of the component or some global state somewhere...