Typescript styled component "The type of this node cannot be serialized because its property '[$$PropertyValue]' cannot be serialized"

Question

I am building a server-side rendered website using NextJS, TypeScript and the Stitches CSS library.

When using Stitches styled function to create styled components I get this lint error:

The type of this node cannot be serialized because its property '[$$PropertyValue]' cannot be serialized.ts(4118)

Here is part of my stitches.config file:

// ...
export const {
  styled, // using this to create styled components
  css,
  theme,
  createTheme,
  globalCss,
} = createStitches({
  theme: {
    colors: {
      ...gray,
      ...mauve,
    }
  }
})

Here is one of the component files that has the lint error:

import { styled } from "../stitches.config"

// Lint error on button: The type of this node cannot be serialized because its property '[$$PropertyValue]' cannot be serialized.ts(4118)

export const Button = styled('button', {
  backgroundColor: '$gray',
  color: '$mauve',
})

Using import { styled } from "@stitches/react" instead removes the lint error but then I can't use custom styles defined in stitches.config

Any help or info about what this error means would appreciated. Thanks

Answer 1

There's currently an issue with ui-stitches and typescript 4.8. Downgrade to 4.7

https://github.com/stitchesjs/stitches/issues/1078