No HTML charset in dev mode

GUI commented 2 years ago

[x] I have read the troubleshooting section before opening an issue.
[x] I have tried upgrading iles and vite.

Description 📖

When running the dev server, the HTML page is returned without any character encoding, leading to garbled characters in some browsers (if any UTF-8 characters are used) and warnings in other browsers.

The Vite dev server appears to return HTML pages with an HTTP header of Content-Type: text/html (without a charset), so iles seems consistent with that. However, in a boilerplate Vite app, the HTML template includes a <meta charset="UTF-8" /> tag that sets the charset for the HTML page. For a boilerplate iles app, the dev template does not contain such a meta tag, leaving the dev environment without a charset. A utf-8 meta tag (I believe via the @vueuse/head integration) does get injected later on during the loading process, so while the meta tag does exist eventually, I think browsers ignore it since it wasn't present in the original HTML being returned.

The production built site does contain a <meta charset="UTF-8" /> tag in the HTML that gets output, so this issue only affects the dev environment

Here is the original HTML being received by the browser in dev mode, where no meta tag is present:

<!DOCTYPE html>
<html>
<script type="module" src="/@vite/client"></script>

<body>
<div id="app"></div>
<script type="module" src="/@iles-entry"></script>
</body>
</html>

Reproduction 🐞

A standard npm init iles@next example app without any changes can demonstrate this problem, but let me know if you need the results of that in a git repo.

Screenshots 📷

Garbled characters in safari:

Screen Shot 2022-01-21 at 4 27 01 PM

Not garbled in Firefox, but a warning that this may occur:

Screen Shot 2022-01-21 at 4 27 05 PM

I just stumbled onto iles and am enjoying it, so thanks for this project!

ElMassimo commented 2 years ago

Hi Nick! @GUI

Thanks for the detailed report! 😃

I hadn't run into this because some browsers use UTF-8 by default.

Added an explicit charset for development in iles@0.7.24.

GUI commented 2 years ago

This fix works great. Many thanks for the speedy fix!

ElMassimo / iles