Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Preact recreates and replaces root DOM element upon hydration instead of attaching itself to it

See original GitHub issue

Do you want to request a feature or report a bug? Bug What is the current behaviour? Preact rerenders the whole app and replaces the prerendered root node instead of attaching itself to it which causes a flick. If the current behaviour is a bug, please provide the steps to reproduce. Created a repository with a subset of my project: https://github.com/fagyikaa/preact-cli-critter-issue Initially created it to demonstrate critter bug but it’s demonstrates this bug as well. Run npm build and npm serve (or just serve the already built code). When Preact starts after the initial page load you can see a flick.

What is the expected behaviour? It should attach itself to the root node of the app and doesn’t replace DOM nodes.

Please mention other relevant information. To check my hypothesis edited the prerendered index.html and logged out the root node like this: <body><div id="app"><script>console.log(document.querySelector('#'app))</script>... It then printed out this div into console and when want to reveal in elements panel the console warns me that ‘Node cannot be found in the current page.’ Also logged out canHydrate variable in preact-cli/lib/lib/entry.js which is true so hydrate is indeed called and not render.

Environment Info: System: OS: macOS 10.15.5 CPU: (8) x64 Intel® Core™ i5-1038NG7 CPU @ 2.00GHz Binaries: Node: 12.18.3 - ~/.nvm/versions/node/v12.18.3/bin/node npm: 6.14.6 - ~/.nvm/versions/node/v12.18.3/bin/npm Browsers: Chrome: 86.0.4240.183 Firefox: 80.0.1 Safari: 13.1.1 npmPackages: preact: 10.3.2 => 10.3.2 preact-cli: ^3.0.0 => 3.0.0 preact-render-to-string: 5.1.4 => 5.1.4 preact-router: 3.2.1 => 3.2.1 npmGlobalPackages: preact-cli: 3.0.1