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.

App renders twice

See original GitHub issue

Do you want to request a feature or report a bug? bug

What is the current behaviour? App renders twice if there is anything inside the body.

Steps to repro preact create default preact-test cd preact-test Add a div to the body of the template, like so:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title><% preact.title %></title>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <link rel="apple-touch-icon" href="/assets/icons/apple-touch-icon.png" />
    <% preact.headEnd %>
  </head>
  <body>
    <div></div>
    <% preact.bodyEnd %>
  </body>
</html>

npm run build npm run serve

Note: During development, that div is replaced. Shouldn’t either.

What is the expected behaviour? Should only render once.

Please mention other relevant information. We should have a way to choose where the app renders. The solution mentioned here https://github.com/preactjs/preact-cli/issues/457 breaks pre-rendering because there is no document.

Issue https://github.com/preactjs/preact-cli/issues/264 was marked as stale but is another one related to this.

Another problem that would be solved by being able to choose where the app renders is compatibility to old libraries that require HTML elements to be on the page as soon as they load. For example:

...head
  <body>
    <div id="id-for-lib-that-will-inject-stuff"></div>
    
    <!-- preact stuff -->
    <div id="render-app-here"></div>
    <% preact.bodyEnd %>
    
     <script src="lib/path/here.js"></script>
  </body>
</html>

preact info

Environment Info:
  System:
    OS: macOS 10.15.6
    CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
  Binaries:
    Node: 12.16.2 - ~/n/bin/node
    Yarn: 1.22.4 - ~/npm/bin/yarn
    npm: 6.14.4 - ~/n/bin/npm
  Browsers:
    Chrome: 84.0.4147.89
    Firefox: 77.0.1
    Safari: 13.1.2
  npmPackages:
    preact: ^10.3.2 => 10.4.6
    preact-cli: ^3.0.0-rc.6 => 3.0.0-rc.18
    preact-render-to-string: ^5.1.4 => 5.1.10
    preact-router: ^3.2.1 => 3.2.1
  npmGlobalPackages:
    preact-cli: 3.0.0-rc.18

Issue Analytics

State:
Created 3 years ago
Comments:17 (6 by maintainers)

Top GitHub Comments

2reactions

developitcommented, Jul 24, 2020

Changed the label to has-workaround since we have at least narrowed it down to a dev vs prod thing (there’s no solution that works the same in both).

1reaction

marlonmarcellocommented, Jul 21, 2020

I also tried adding the <div id="preact_root"> to both, the template AND App.js but then when I run npm run build and npm run serve I see the app rendered twice.