Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
gijsroge opened this issue Aug 13, 2021 · 5 comments
Closed

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

gijsroge opened this issue Aug 13, 2021 · 5 comments

Comments

@gijsroge
Copy link

gijsroge commented Aug 13, 2021 •
edited

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?
@gijsroge gijsroge changed the title Latest version doesn't output ssr version 0.12.0 doesn't output ssr version Aug 13, 2021
@frandiox
Copy link
Owner

@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
Copy link
Author

gijsroge commented Aug 16, 2021 •
edited

@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
Copy link
Author

gijsroge commented Aug 16, 2021 •
edited

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
Copy link
Owner

@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
Copy link
Author

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

Thanks for following up!

@frandiox frandiox changed the title 0.12.0 doesn't output ssr version SSR breaks when adding attributes to the app wrapper div Aug 16, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@frandiox @gijsroge