search

frandiox / vite-ssr

Use Vite for server side rendering in Node
MIT License
830 stars 92 forks source link

SSR breaks when adding attributes to the app wrapper div #82

Closed gijsroge closed 3 years ago

gijsroge commented 3 years ago

If you just start a fresh vite project and follow the vite-ssr vue documentation. When you run vite-ssr dev or build an ssr version and host it, you will get an empty page source (just an empty #app <div/>)

Tried debugging it but I cannot find the cause. Is this something you can reproduce?

frandiox commented 3 years ago

@gijsroge I cannot reproduce it, no. I tried with the repo examples and it works well in both dev and prod. Can you provide a small repo with a reproduction?

gijsroge commented 3 years ago

@frandiox sorry, when trying to reproduce the issue I forgot to edit the vite config and main.ts like stated in the docs..

So we can probably close this issue as it just works fine when starting a fresh project. However when we upgraded from 0.10.6 to 0.12.0 it broke our ssr output.

I don't expect you to fix our issue, but do you have any tips in trying to debug this?

Edit: I managed to reduce our project to the absolute bare minimum, but still have the issue. https://github.com/gijsroge/vite-ssr-issue This is not even using state, so i'm probably missing something very obvious here..

gijsroge commented 3 years ago

Found the issue.

When you have custom classes on your index.html the ssr output will fail

Does not work:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="app" class="flex flex-col min-h-screen"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

Does work:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>
frandiox commented 3 years ago

@gijsroge Ah I see, thanks for debugging it!

That's probably related to this line: https://github.com/frandiox/vite-ssr/blob/master/src/build/utils.ts#L18 I guess we can update that to a regexp and try to keep attributes 🤔

gijsroge commented 3 years ago

Yeah, sounds like a great idea. No hurry, I'm avoiding the attributes for now.

Thanks for following up!