search

ben-rogerson / twin.macro

🦹‍♂️ Twin blends the magic of Tailwind with the flexibility of css-in-js (emotion, styled-components, solid-styled-components, stitches and goober) at build time.
MIT License
7.89k stars 184 forks source link

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

Closed ovidiuwin closed 1 year ago

ovidiuwin commented 1 year ago

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 commented 1 year ago

Same issue

rezamoosavidweb commented 1 year ago

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 commented 1 year ago

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

ben-rogerson commented 1 year ago

Closing in favour of https://github.com/ben-rogerson/twin.macro/issues/788