Emotion + twin.macro not working in nextjs 13 app dir

[Ovidiu G]

I'm trying to use emotion with tailwindcss and twin.macro along with the new nextjs v13 app directory. I followed the example here https://github.com/ben-rogerson/twin.examples/tree/master/next-emotion-typescript and created a withTwin file but I get the already well known error : createContext only works in Client Components. Add the "use client" directive at the top of the file to use it..

If I remove importSource: "@emotion/react" option from babel presets then the error is gone but then the css prop is not applied correctly and I'm faced with the You have tried to stringify object returned from css function. It isn't supposed to be used directly (e.g. as value of the className prop), but rather handed to emotion so it can handle it (e.g. as value of css prop). which is expected since I removed the importSource.. What am I missing here?

Codesandbox: https://codesandbox.io/p/sandbox/next13-app-react-query-forked-smn5km?file=%2Fpackage.json%3A1%2C1

[dzcpy]

Same issue

[Reza Moosavi]

hello , you can create a file for import third party package in next.js and add 'use client' to top of the file then the export package and use it from this export : https://nextjs.org/docs/getting-started/react-essentials#third-party-packages

[Ben Rogerson]

I'm going to take another look into this soon. Will let you know of the findings.

[Ben Rogerson]

Closing in favour of #788