devtools icon indicating copy to clipboard operation
devtools copied to clipboard

Published 20 hours ago • verified publisher icon react-hook-form

Conflicting @emotion/react

Open medihack opened this issue 3 years ago • 15 comments

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"?

medihack avatar Jun 26 '22 17:06 medihack

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.

bluebill1049 avatar Jun 26 '22 22:06 bluebill1049

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.

medihack avatar Jun 27 '22 10:06 medihack

I think it's fine to ignore.

bluebill1049 avatar Jul 01 '22 11:07 bluebill1049

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.

https://github.com/emotion-js/emotion/issues/2343#issuecomment-817265816 https://github.com/emotion-js/emotion/discussions/2795#discussioncomment-3031404

Even Mantine seems to switch https://github.com/mantinedev/mantine/issues/1715

medihack avatar Jul 02 '22 21:07 medihack

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

bluebill1049 avatar Jul 02 '22 22:07 bluebill1049

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.

medihack avatar Jul 03 '22 10:07 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.

bluebill1049 avatar Jul 03 '22 23:07 bluebill1049

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

medihack avatar Jul 04 '22 06:07 medihack

not at all, thanks for contributing and helping. 🙏

bluebill1049 avatar Jul 04 '22 06:07 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.

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.

medihack avatar Jul 24 '22 14:07 medihack

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

bluebill1049 avatar Jul 24 '22 22:07 bluebill1049

never mind, it's already released, I didn't revert your original commit. could you verify it's working?

bluebill1049 avatar Jul 24 '22 22:07 bluebill1049

never mind, it's already released, I didn't revert your original commit. could you verify it's working?

It seems reverted as @emotion/react is still a direct dependency in master branch and not a peer dependency.

medihack avatar Jul 27 '22 18:07 medihack

oops, would like you to push your PR again? let's remerge it?

bluebill1049 avatar Jul 27 '22 23:07 bluebill1049