Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Stencil Version

4.31.0

Stencil Framework Output Target

React

Stencil Framework Output Target Version

1.0.2

Current Behavior

• Install and build react components with the latest stencil version
• Try to use those react-components in Nextjs (copy the generated react components.server.ts to the nextjs app and import those components)

Error:
_Uncaught Error: Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:

• A server/client branch if (typeof window !== 'undefined').
• Variable input such as Date.now() or Math.random() which changes each time it's called.
• Date formatting in a user's locale which doesn't match the server.
• External changing data without sending a snapshot of it along with the HTML.
• Invalid HTML tag nesting.

It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.

https://react.dev/link/hydration-mismatch_

Expected Behavior

The components should work in a nextjs application

Steps to Reproduce

1. Install and build
2. Link current directory by running 'npm link' in the root folder
3. Rename the hydration package to 'stencilssr-hydrate' and link it
4. Open the nextjs-app-example and run 'npm link stencilssr && npm link stencilssr-hydrate'
5. Run 'npm run dev' and see the error in the console

Code Reproduction URL

https://github.com/JohannesSchwegler/stencilssr-demo

Additional Information

No response