Conflicting @emotion/react

[medihack]

My app uses Mantine component library, which uses Emotion under the hood. But it seems React Hook Form DevTools also uses Emotion, but a different version. When I add DevTools to my app, I now get the following warning on the console:

You are loading @emotion/react when it is already loaded. Running multiple instances may cause problems. This can happen if multiple versions are used, or if multiple builds of the same version are used.

Should I ignore it, or is there a way to make DevTools more "sandboxed"?

[bluebill1049]

What's the version difference? maybe we can upgrade to the latest if that's the issue, but it's a devtool so it's not bundle into your prod code, so i wouldn't worry too much about it.

[medihack]

Mantine v5 currently uses @emotion/react version 11.9.3. As DevTools is often used with other component UI libraries (and Emotion is a very common style library) wouldn't it make sense to declare Emotion as a peer dependency in DevTools? But maybe you are right, and I should just ignore the warnings.

[bluebill1049]

I think it's fine to ignore.

[medihack]

Yes, I will ignore it. But there are also some discussions in the Emotion repo itself if @emotion/react is better added as a peer dependency.

emotion-js/emotion#2343 (comment)
emotion-js/emotion#2795 (reply in thread)

Even Mantine seems to switch mantinedev/mantine#1715

[bluebill1049]

oh i see, would you like to send a PR to adjust that? happy to re-release if that will resolve the issue.

[medihack]

Sure, it is as easy as moving the dependency line to peer dependencies. As version restriction, I would use "@emotion/react": ">=11.0.0". I will open a PR.

[bluebill1049]

this caused issue: https://codesandbox.io/s/react-hook-form-get-started-ts-forked-o1ebc5?file=/src/index.tsx Will revert that commit for now.

[medihack]

Sure, I will investigate what's wrong here. Sorry for the trouble.

[bluebill1049]

not at all, thanks for contributing and helping. 🙏

[medihack]

this caused issue: https://codesandbox.io/s/react-hook-form-get-started-ts-forked-o1ebc5?file=/src/index.tsx Will revert that commit for now.

I took another look into this. This import is a bit strange: import { DevTool } from "./src";.
Shouldn't it be: import { DevTool } from "@hookform/devtools";?

Also, there is no "@emotion/react" in the dependencies of the linked CodeSandbox (but one has to, as it is a peer dependency). I wonder if it was more a problem of the CodeSandbox example.

[bluebill1049]

oops, you are right... was using a CSB reference to src folder i will revert (revert) your merge