Removing emotion as peer dependency

[nicobatalla]

Emotion was added as peer dependency on 0.40 (pmndrs/jotai#1856).

It was mentioned that at some point jota-devtools wants to move to a native CSS solution. I know that doing that can take a while. Any workaround in the meantime for apps that use other styling solutions and don't want to install emotion just for this package?

There should not be any interoperation issues but the build is failing on the jotai-devtools version update PR in our repo because we don't have @emotion/react installed. In our case we are using styled-components, so we don't really need emotion.
The previous approach was fine because it was tree-shaken anyway, but now we are forced to install emotion too if we want to update.

Originally posted by @nicobatalla in pmndrs/jotai#1856 (comment)

[arjunvegda]

Mantine's V7 will be adopting a native CSS solution. We'll bring it to Jotai-DevTools as soon as it's released.

What's the issue are you running into with @emotion/react? Are you using <DevTools/> or are you using redux devtools via one of the hooks? Perhaps you could try patching the package using patch-package on your end.

I'm happy to provide workarounds if you're using redux devtools and don't need <DevTools/>

[nicobatalla]

The way we are using the package is that we have this component

import React, { PropsWithChildren } from 'react';
import { useAtomsDevtools } from 'jotai-devtools';

/**
 * Wrapper used to be able to debug jotai Atoms in Redux Dev Tools extension
 * Needs to be placed inside a jotai provider
 * Only works when NODE_EVN !== 'production'
 */
export const AtomsDevTools: React.FC<PropsWithChildren<{name: string}>> = ({ children, name }) => {
  useAtomsDevtools(`jotai-debug-${name}`);
  return <>{children}</>;
};

Then we use Redux Devtools chrome extension to debug live. It used to work fine until 0.40. Now the same code fails at the build stage because we don't have @emotion/react installed.

We don't really want to install @emotion/react since we are using styled-components as our styling solution, so it would be like having two packages that do the same thing.

[arjunvegda]

Ahh! If you're not using <DevTools/> then you don't need @emotion/react.

Could you try importing useAtomsDevtools from jotai-devtools/utils like so? and see if that fixes it?

import { useAtomsDevtools } from 'jotai-devtools/utils';

[nicobatalla]

That worked, thanks!

What's the difference between useAtomDevtools from jotai-devtools and from jotai-devtools/utils? 🤔

[arjunvegda]

No difference at the code level. jotai-devtools is an all-in-one bundle that exports <DevTools/> and all the hooks. It has imports for @emotion/react, @mantine/core etc.

jotai-devtools/utils, however, is a separate entry point for just hooks that strip out imports that are not required for hooks to work.

[nicobatalla]

Got it, thanks!