ruslandoga commented 3 years ago

👋

Describe the bug

</body></html> are cut out from the HTML response in prod version of the app.

To Reproduce Please make sure you've tested with the latest versions of Svelte and Sapper.

Steps:

npx degit "sveltejs/sapper-template#webpack" test (it affects rollup version as well)
cd test && yarn
yarn dev --no-hot
curl localhost:3000 results in

HTML response

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta name="theme-color" content="#333333">

    <base href="/">

    <link rel="stylesheet" href="global.css">
    <link rel="manifest" href="manifest.json" crossorigin="use-credentials">
    <link rel="icon" type="image/png" href="favicon.png">

    <!-- Sapper creates a <script> tag containing `src/client.js`
         and anything else it needs to hydrate the app and
         initialise the router -->
    <script>__SAPPER__={baseUrl:"",preloaded:[void 0,{}]};if('serviceWorker' in navigator)navigator.serviceWorker.register('/service-worker.js');</script><script src="/client/6a804cc0d16b563fe3d7/main.js" defer></script>

    <!-- Sapper generates a <style> tag containing critical CSS
         for the current page. CSS for the rest of the app is
         lazily loaded when it precaches secondary pages -->
    <style>main.svelte-1uhnsl8{position:relative;max-width:56em;background-color:white;padding:2em;margin:0 auto;box-sizing:border-box}
nav.svelte-1dbd5up{border-bottom:1px solid rgba(255,62,0,0.1);font-weight:300;padding:0 1em}ul.svelte-1dbd5up{margin:0;padding:0}ul.svelte-1dbd5up::after{content:'';display:block;clear:both}li.svelte-1dbd5up{display:block;float:left}[aria-current].svelte-1dbd5up{position:relative;display:inline-block}[aria-current].svelte-1dbd5up::after{position:absolute;content:'';width:calc(100% - 1em);height:2px;background-color:rgb(255,62,0);display:block;bottom:-1px}a.svelte-1dbd5up{text-decoration:none;padding:1em 0.5em;display:block}
h1.svelte-1kk9opm,figure.svelte-1kk9opm,p.svelte-1kk9opm{text-align:center;margin:0 auto}h1.svelte-1kk9opm{font-size:2.8em;text-transform:uppercase;font-weight:700;margin:0 0 0.5em 0}figure.svelte-1kk9opm{margin:0 0 1em 0}img.svelte-1kk9opm{width:100%;max-width:400px;margin:0 0 1em 0}p.svelte-1kk9opm{margin:1em auto}@media(min-width: 480px){h1.svelte-1kk9opm{font-size:4em}}</style>

    <!-- This contains the contents of the <svelte:head> component, if
         the current page has one -->
    <title>Sapper project template</title>
</head>
<body>
    <!-- The application will be rendered inside this element,
         because `src/client.js` references it -->
    <div id="sapper">

<nav class="svelte-1dbd5up"><ul class="svelte-1dbd5up"><li class="svelte-1dbd5up"><a aria-current="page" href="." class="svelte-1dbd5up">home</a></li>
        <li class="svelte-1dbd5up"><a href="about" class="svelte-1dbd5up">about</a></li>

        <li class="svelte-1dbd5up"><a rel="prefetch" href="blog" class="svelte-1dbd5up">blog</a></li></ul></nav>

<main class="svelte-1uhnsl8">

<h1 class="svelte-1kk9opm">Great success!</h1>

<figure class="svelte-1kk9opm"><img alt="Success Kid" src="client/1a7995d9ba835edd2e10b82db7371a3f.jpg" class="svelte-1kk9opm">
    <figcaption>Have fun with Sapper!</figcaption></figure>

<p class="svelte-1kk9opm"><strong>Try editing this file (src/routes/index.svelte) to test live reloading.</strong></p></main></div>
</body>
</html>

Note that </body></html> are included at the end of the response.

yarn build && node __sapper__/build
curl localhost:3000

HTML response

```html Sapper project template

Great success!

Try editing this file (src/routes/index.svelte) to test live reloading.

```

Note that </body></html> are not present in the response.

Expected behavior </body></html> are present in the prod version response.

Information about your Sapper Installation:

The output of `npx envinfo --system --npmPackages svelte,sapper,rollup,webpack --binaries --browsers`

``` System: OS: macOS 10.15.7 CPU: (4) x64 Intel(R) Core(TM) i5-4258U CPU @ 2.40GHz Memory: 45.48 MB / 8.00 GB Shell: 3.1.2 - /usr/local/bin/fish Binaries: Node: 15.4.0 - /usr/local/bin/node Yarn: 1.22.10 - /usr/local/bin/yarn npm: 7.0.15 - /usr/local/bin/npm Browsers: Chrome: 87.0.4280.88 Firefox Developer Edition: 84.0 Safari: 14.0 npmPackages: sapper: ^0.28.0 => 0.28.10 svelte: ^3.17.3 => 3.31.0 webpack: ^4.7.0 => 4.44.2 ```

Your browser: curl, so it affects all browsers
Your hosting environment (i.e. Local, GCP/AWS/Azure, Vercel/Begin, etc...): local
If it is an exported (npm run export) or dynamic application: dynamic

Severity Probably not severe, but I suspect it might be the reason for broken layout on older browsers (safari on ios 10.3.4).

stephane-vanraes commented 3 years ago

This is actual valid HTML and has been for a very long time. It is omitted from the build version as way to optimize the load, less to download, faster parse times, etc... It is very doubtful this is the cause of broken layout, even in older browser, considering how long this has been around. If you go back far enough for this to break you will run into a lot more severe issues regarding unsupported features of html, css or js beforehand.

ruslandoga commented 3 years ago

Ah, thank you for the info @stephane-vanraes , I didn't know about it.

sveltejs / sapper

</body></html> are cut out from the response in prod version #1673

Great success!