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.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Stitches + NextJS 13 issues with build.

shanejones opened this issue · comments

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

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 👍

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