search

lazarv / react-server

The easiest way to build React apps with server-side rendering
https://react-server.dev
MIT License
121 stars 6 forks source link

Incomplete Error message display #55

Closed mrose closed 1 month ago

mrose commented 1 month ago

Describe the bug

I am using the Colorzilla chrome extension which (sadly) adds an attribute to the body tag:

. The addition causes a hydration error since the attribute is not in the generated html. So, I disabled the extension and voila. However I noticed that the error did not display fully when I compared it to the console output, and am attaching two screenshots to illustrate. Screenshot 2024-10-18 at 1 18 20 PM Screenshot 2024-10-18 at 1 15 55 PM One simple fix would be to add some text to the error overlay suggesting that the developer view the console message. The benefit of this approach avoids fixing more message parsing related issues in the future. ### Reproduction _No response_ ### Steps to reproduce Install the colorzilla plugin and output any page [https://chromewebstore.google.com/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp](url) ### System Info ```shell gitpod /workspace/react-server-play (but-first-a-todos-page) $ npx envinfo --system --npmPackages '{@lazarv/react-server,@lazarv/react-server-*,react,react-dom,react-server-dom-webpack,vite}' --binaries --browsers Need to install the following packages: envinfo@7.14.0 Ok to proceed? (y) y System: OS: Linux 6.1 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish) CPU: (16) x64 AMD EPYC 7B13 Memory: 48.33 GB / 62.79 GB Container: Yes Shell: 5.1.16 - /bin/bash Binaries: Node: 20.17.0 - ~/.nvm/versions/node/v20.17.0/bin/node Yarn: 1.22.22 - ~/.nvm/versions/node/v20.17.0/bin/yarn npm: 10.8.2 - ~/.nvm/versions/node/v20.17.0/bin/npm pnpm: 9.9.0 - ~/.nvm/versions/node/v20.17.0/bin/pnpm npmPackages: @lazarv/react-server: 0.0.0-experimental-d84eb64-20240929-807e623b => 0.0.0-experimental-d84eb64-20240929-807e623b react: 0.0.0-experimental-204a551e-20240926 => 0.0.0-experimental-204a551e-20240926 vite: 6.0.0-alpha.18 => 6.0.0-alpha.18 ``` ### Used Package Manager pnpm ### Logs _No response_ ### Validations - [X] Follow our [Code of Conduct](https://github.com/lazarv/react-server/blob/main/CODE_OF_CONDUCT.md) - [X] Read the [Contributing Guidelines](https://github.com/lazarv/react-server/blob/main/CONTRIBUTING.md). - [X] Read the [docs](https://react-server.dev). - [X] Check that there isn't [already an issue](https://github.com/lazarv/react-server/issues) that reports the same bug to avoid creating a duplicate. - [X] Check that this is a concrete bug. For Q&A open a [GitHub Discussion](https://github.com/lazarv/react-server/discussions). - [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.
lazarv commented 1 month ago

Hi @mrose! Thanks for the screenshots and details about the error overlay issue, a fix will arrive very soon!

While the hydration error occurs during development mode, after building and running an app in production mode, such hydration errors do not throw when only additional attributes or elements are added to the document. A bit more about this change in React at https://react.dev/blog/2024/04/25/react-19#compatibility-with-third-party-scripts-and-extensions and @lazarv/react-server uses a very recent experimental version of React 19.

mrose commented 1 month ago

fix confirmed - looks good!

github-actions[bot] commented 13 hours ago

This issue has been locked since it has been closed for more than 30 days.

If you have found a concrete bug or regression related to it, please open a new bug report with a reproduction against the latest version of @lazarv/react-server. If you have any other comments you should create a new discussion.