meta charset not set correctly

[brandonwoo]

<meta charset="utf-8" data-react-helmet="true">
I have this line in the head when I inspect the source of the generated html, but it doesn't get set in Chrome properly (still gets set as "Western - Windows 1252" in Chrome).

Upon page load, foreign languages (in my case, Japanese) show up as gibberish and are only displayed correctly only after I select utf-8 encoding manually in Chrome.

On page load:

After selecting utf-8 manually:

[janoist1]

Can you manually set the meta tag somehow in order to check if it's still failing to display correctly? Isn't this issue possible because of the HTTP headers contain wrong charset information?

[janoist1]

Any update on this?

[brandonwoo]

@janoist1 Hi, sorry for the late reply (gotta figure a way to make github notifications more prominent...)

Nope I haven't been able to solve this... How do I "set the meta tag manually"? I am using your starter kit which doesn't seem to have a conventional index.html page

[janoist1]

It doesn't have a static index.html because the content is rendered dynamically on the server side - as it should be in a universal app. Some other solutions do have a static index.html but I consider that a bit misleading as the assets, the title, the meta data, the content itself, etc has to be injected somehow which makes that HTML file act as a template. I think it is cleaner and more efficient to store this all data in a configuration object and use React to build up the entire HTML.

Back to your original question, have a look at these two: renderHtmlLayout and this. Try replacing the function renderHtmlLayout in the src/server.js with a custom one based on the original, thus you can add the meta tag manually. I haven't tried but hope this helps finding out the issue, good luck! :)

[brandonwoo]

Hi @janoist1 , like I said in my original post, the meta is set correctly by helmet in the resulting html, but the page doesn't render utf characters properly (charset is set as "Western - Windows 1252" in Chrome). I'm guessing this is probably because the meta is set by the browser on page load, but helmet modifies the header meta tag AFTER the page load is initiated.

I forgot to mention one (important?) point: I have universal rendering set to disabled in config/index.js

universal     : {
    enabled     : false,
    output      : 'server.js',
    client_info : 'client_info.json'
},

[janoist1]

I've just checked it, and looks like it's a bug in the starter kit. I'll do some investigation and update you. Thanks for reporting it!

[brandonwoo]

thanks! just wondering if this will be fixed soon, or how should i go about fixing this. I've started a new project with your starter kit because it supports universal rendering over davezuko's starter kit, but I am going to go without server rendering initially. if this is going to take a long while/is not going to be a trivial fix then I'm gonna have to switch over to davezuko's starter-kit asap.

[janoist1]

If you don't need server side rendering then it's probably better (now for sure) to use Davezuko's starter kit. I'm also planning to take out the universal switch from this project as it's a universal starter kit, we don't actually need to be able to turn it off.