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.92k stars 183 forks source link

Stitches + NextJS 13 issues with build. #748

Closed shanejones closed 1 year ago

shanejones commented 1 year ago

I've followed the guide for setting this up with stitches(ts) and all works brilliantly when I'm in my local development environment.

There was one part of the guide which has changed slightly and might need an update to work with NextJS 13

In the guide, we have this for this block for adding the server stylesheet

// pages/_document.tsx
export default class Document extends NextDocument {
  static async getInitialProps(ctx: any) {
    try {
      const initialProps = await NextDocument.getInitialProps(ctx)

But within next 13 this file extends a different class as you can see here

// pages/_document.tsx
export default class Document extends ServerStyleSheetDocument {
  static async getInitialProps(ctx: any) {
    try {
      const initialProps = await ServerStyleSheetDocument.getInitialProps(ctx)

Even though this works fine in local dev, it does have an error which is as follows

Class static side 'typeof Document' incorrectly extends base class static side 'typeof ServerStyleSheetDocument'.
  The types returned by 'getInitialProps(...)' are incompatible between these types.
    Type 'Promise<{ styles: Element; html: string; head?: Element[]; }>' is not assignable to type 'Promise<{ styles: (Element | ReactFragment)[]; html: string; head?: Element[]; }>'.
      Type '{ styles: JSX.Element; html: string; head?: JSX.Element[]; }' is not assignable to type '{ styles: (Element | ReactFragment)[]; html: string; head?: Element[]; }'.
        Types of property 'styles' are incompatible.
          Type 'Element' is missing the following properties from type '(Element | ReactFragment)[]': length, pop, push, concat, and 29 more.ts(2417)

Any pointers on what needs to be done here to get this working on the built version of the site?

Thanks

ben-rogerson commented 1 year ago

Thanks for letting me know about the out of date instructions.

I'm unsure on a fix here - perhaps I can take a look sometime after the next major release due soon. If you manage to find a fix/workaround in the meantime please share 👍

shanejones commented 1 year ago

I do have a workaround. Will pop it as a PR on the documentation for you