When using use client with the @pigment-css/nextjs-plugin, an error occurs.

[tsingksan]

Steps to reproduce

1. npx create-next-app@latest
2. install @pigment-css/react @pigment-css/nextjs-plugin
3. next.conifg.js

import { withPigment, extendTheme } from '@pigment-css/nextjs-plugin';

const nextConfig = {
    output: "export",
};

export default withPigment(nextConfig, {
  theme: extendTheme({
      colors: {
      primary: 'tomato',
      secondary: 'cyan',
      },
      spacing: {
      unit: 8,
      },
      typography: {
      fontFamily: 'Inter, sans-serif',
      },
  }),
});

4. page.tsx

'use client'
import styles from "./page.module.css";
import { css } from "@pigment-css/react";

const description = css`
  display: inherit;
  justify-content: inherit;
  align-items: inherit;
  font-size: 0.85rem;
  max-width: var(--max-width);
  width: 100%;
  z-index: 1;
  font-family: var(--font-mono);
`;
......
export default function Home() {
 return (
    ......
      <div className={description}>Test</div>
    ......
 }
}

Current behavior

Expected behavior

No response

Context

No response

Your environment

System:
OS: macOS 14.3
Binaries:
Node: 20.12.2 - ~/.nvm/versions/node/v20.12.2/bin/node
npm: 10.5.0 - ~/.nvm/versions/node/v20.12.2/bin/npm
pnpm: 8.9.0 - ~/.nvm/versions/node/v20.12.2/bin/pnpm
Browsers:
Chrome: 124.0.6367.60
Edge: Not Found
Safari: 17.3
npmPackages:
@types/react: ^18 => 18.2.61
react: ^18 => 18.2.0
react-dom: ^18 => 18.2.0
typescript: ^5 => 5.3.3

Search keywords: @pigment-css/nextjs-plugin use client