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

Twin Macro Doesn't Work With Next.js (A Working Example Would Solve This) #834

Closed machineghost closed 7 months ago

machineghost commented 10 months ago

Really I think https://github.com/ben-rogerson/twin.macro/issues/606 should just be re-opened, but in case you'd prefer a new ticket I'll re-post what I said there ...

Twin.macro still doesn't work (in October 2023) with Next.

I've tried following multiple online articles, I've tried following https://github.com/ben-rogerson/twin.examples/tree/master/next-styled-components-typescript#add-the-next-babel-config (which is designed for Babel ... Next now uses SWC), I've looked at a ton of Stack Overflow questions ...

... at the end of the day, it just doesn't work. A basic working example of Next.js (modern Next.js, with SWC, not Babel), Tailwind, and twin macro would be extremely helpful, because currently it seems impossible to use that stack.

To be clear, I'm deliberately not pointing to any one issue, because A) there are multitudes of them, and B) the fundamental problem isn't each issue, it's the lack of a working example.

ben-rogerson commented 10 months ago

The next+sc example worked last time it was visited (3 months ago) - sounds like there's some new issues that have popped up?

btw, Twin runs with babel alongside swc and there was never an upgrade to use just swc with twin.

mthmcalixto commented 10 months ago

The next+sc example worked last time it was visited (3 months ago) - sounds like there's some new issues that have popped up?

btw, Twin runs with babel alongside swc and there was never an upgrade to use just swc with twin.

Broke in nextjs 14

reedwane commented 10 months ago

The next+sc example worked last time it was visited (3 months ago) - sounds like there's some new issues that have popped up? btw, Twin runs with babel alongside swc and there was never an upgrade to use just swc with twin.

Broke in nextjs 14

yeah. seems so. Couldn't get it to work by updating the template or by manually setting up twin.macro on nextjs 14. I'm getting a false You are attempting to export "metadata" from a component marked with "use client". And I am not using a client component on the layout file other than importing the providers where I had declared use client on them

mthmcalixto commented 10 months ago

The next+sc example worked last time it was visited (3 months ago) - sounds like there's some new issues that have popped up? btw, Twin runs with babel alongside swc and there was never an upgrade to use just swc with twin.

Broke in nextjs 14

yeah. seems so. Couldn't get it to work by updating the template or by manually setting up twin.macro on nextjs 14. I'm getting a false You are attempting to export "metadata" from a component marked with "use client". And I am not using a client component on the layout file other than importing the providers where I had declared use client on them

Yes, it appears that all files are now from the client when using withTwin.js

They changed something and didn't say anything about it.

therealgilles commented 10 months ago

From my limited understanding, withTwin.js disables server components and the metadata object is now only compatible with server components:

The metadata object and generateMetadata function exports are only supported in Server Components.

ben-rogerson commented 9 months ago

I made some updates to the next + styled-components example and got it working again but I'm not too happy with the workaround. If anyone can help with a more appropriate fix, please do as I'm out of ideas.