Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Inconsistencies in classname between server and client builds #1441

Open
2 tasks done
ApurvBazari opened this issue Jul 3, 2024 · 2 comments
Open
2 tasks done

Inconsistencies in classname between server and client builds #1441

ApurvBazari opened this issue Jul 3, 2024 · 2 comments

Comments

@ApurvBazari
Copy link

Describe the bug

Issue:

Our component library is built using @vanilla-extract/css, where we transpile style.ts files into style.js for both CommonJS (cjs) and ECMAScript Module (esm) environments. Consumer applications integrate @vanilla-extract/plugins (webpack/rollup, etc.) for style extraction on their end. The issue arises during server-side rendering (SSR) when the server uses the cjs file and the client uses the esm style file.

We are encountering inconsistencies in classnames between client-side and server-side builds while using vanilla-extract/css in our component library. Upon deployment, which supports both cjs and esm builds, we have noticed differences in generated classnames when used in client and server environments. This suggests that the file scoping defined by setFileScope is not consistently applied across different build outputs. Despite setting setFileScope in our build files, there are instances where scoping unexpectedly resets between client and server builds.


Testing:
We have developed a sample project that replicates the setup of the component library and consumer application. This project demonstrates scenarios where classnames differ between client and server.

Upon investigation, we found that the @vanilla-extract/integration package replaces the fileScope set on the transpiled styles file from the component library. Removing this the string replacement line for setFileScope results in consistent classnames between client and server as expected.

ve-integration-file

Results

  • Default
ve-error

  • Modifiying @vanilla-extract/integration
ve-expected

Steps to run the sample application

git clone https://github.com/ApurvBazari/vanilla-extract-sample.git
cd vanilla-extract-sample/component-library
npm i
npm run build
cd ../consumer-app
npm i
npm run all
Goto localhost:3000 to visit the application

Reproduction

https://github.com/ApurvBazari/vanilla-extract-sample/tree/main

System Info

System:
    OS: macOS 14.5
    CPU: (10) arm64 Apple M1 Max
    Memory: 748.63 MB / 64.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 16.20.0 - ~/.nvm/versions/node/v16.20.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v16.20.0/bin/yarn
    npm: 8.19.4 - ~/.nvm/versions/node/v16.20.0/bin/npm
  Browsers:
    Chrome: 126.0.6478.127
    Safari: 17.5
  npmPackages:
    @vanilla-extract/css: ^1.15.3 => 1.15.3 
    @vanilla-extract/webpack-plugin: ^2.3.10 => 2.3.11 
    webpack: ^5.92.0 => 5.92.1

Used Package Manager

npm

Logs

Prop `className` did not match. Server: "styles_divider_base__3ieluy0" Client: "styles_divider_base__n47q7r0"
    at hr
    at Divider (webpack://sample-consumer-app/../component-library/packages/divider/dist/esm/my-component-library-divider.js?:21:28)
    at div
    at ThemeWrapper (webpack://sample-consumer-app/../component-library/packages/theme/dist/esm/my-component-library-theme.js?:23:25)
    at Page

Validations

@ApurvBazari
Copy link
Author

I have opened a PR #1446 for discussion.
It works with the repo shared

@otaviosoares
Copy link

otaviosoares commented Nov 8, 2024

I have a similar issue using the vite plugin, only happens in dev mode. No SSR involved, but I traced the problem down to the same line
Any help would be appreciated.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants