Next.js: Warning `prop` className did not match. Server: "generated_server_className" Client: "generated_client_className"

Describe the bug

After next.js compiles it throws a runtime error with something along the lines of:

Warning: Prop `className` did not match. Server: "pages_themeClass__sryalf0" Client: "pages__createTheme__sryalf0"

Link to reproduction

I have a fork of next.js that has an example of vanilla-extract with typescript and javascript

System Info

Output of npx envinfo --system --npmPackages @vanilla-extract/css,@vanilla-extract/webpack-plugin,@vanilla-extract/esbuild-plugin,@vanilla-extract/vite-plugin,@vanilla-extract/sprinkles,webpack,esbuild,vite --binaries --browsers:

  System:
    OS: Linux 5.14 Arch Linux
    CPU: (4) x64 AMD A8-7600 Radeon R7, 10 Compute Cores 4C+6G
    Memory: 341.82 MB / 6.74 GB
    Container: Yes
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.17.6 - ~/.local/share/volta/tools/image/node/14.17.6/bin/node
    npm: 6.14.15 - ~/.local/share/volta/tools/image/node/14.17.6/bin/npm
  Browsers:
    Brave Browser: 93.1.29.81
  npmPackages:
    @vanilla-extract/css: ^1.6.0 => 1.6.0

[markdalgleish]

I believe this is caused by differing Babel targets between the client and server builds which means that the vanilla-extract Babel plugin can’t consistently create debug IDs for you.

As a workaround, you can apply an explicit debug ID yourself:

-export const [themeClass, vars] = createTheme({ ...tokens });
+export const [themeClass, vars] = createTheme({ ...tokens }, 'myDebugId');

[markdalgleish]

This is now fixed in @vanilla-extract/babel-plugin@1.1.1.