Symbol entities like → do not render properly #248

jdan · 2016-11-13T18:27:45Z

I first noticed then while trying to add » to my markup, which was rendering as Â».

Curiously, HMR seems to handle this just fine! I can change my markup to include » and save, and » shows up as expected. A hard refresh, however, results in Â».

As a quick repro you can save the following as pages/symbol.js:

import React from "react"
import Head from "next/head"

export default () => <div>
    <Head>
        <meta charset="utf-8" />
    </Head>
    &rarr;
</div>

Note that create-react-app does not seem to suffer from this problem.

The text was updated successfully, but these errors were encountered:

jdan · 2016-11-13T18:53:19Z

I thought this might be an issue with glamor's renderStatic method, but it seems react-dom/server returns <div>»</div>. So I'm not quite sure what the source of the issue is.

nkzawa · 2016-11-13T19:46:41Z

I can't reproduce the problem. It seems these symbols are correctly rendered to me.

test(async t => {
  const html = await render('/symbol')
  t.true(html.includes('&rarr;'))
})

This test fails, but if I change it to the actual value (→), it succeeds.

t.true(html.includes('→'))

nkzawa · 2016-11-13T19:52:53Z

These html special chars are converted to the actual characters when transpiling JSX. And it seems you'd have to set <meta charset="utf8" /> using <Head /> component

facebook/react#1177

jdan · 2016-11-13T20:12:10Z

@nkzawa Yes, my apologies, my original repro doesn't seem to point out the issue. I went ahead and modified it.

I am still unable to get the character to display correctly, even with <meta charset="utf-8"> (or "utf8") as pointed out above). Curiously, I see the following in "View source," suggesting that <meta charset> doesn't appear until mount?

<!DOCTYPE html><html><head><title class="next-head">Hello, world! | jordan scales | jordan scales</title><meta class="next-head"/><style>

In DevTools, that <meta> has a charset after the page rehydrates.

jdan · 2016-11-13T20:18:03Z

A-ha, charSet not charset! The following fixes my issue:

<Head>
    <meta charSet="utf-8" />
</Head>

No issue here, thanks for your help.

jdan mentioned this issue Nov 13, 2016

renderStatic fails on some HTML entities threepointone/glamor#110

Closed

jdan closed this as completed Nov 13, 2016

nkzawa mentioned this issue Nov 13, 2016

Add UTF-8 charset by default to head #237

Closed

lock bot locked as resolved and limited conversation to collaborators May 12, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Symbol entities like → do not render properly #248

Symbol entities like → do not render properly #248

jdan commented Nov 13, 2016 •

edited

Loading

jdan commented Nov 13, 2016 •

edited

Loading

nkzawa commented Nov 13, 2016 •

edited

Loading

nkzawa commented Nov 13, 2016 •

edited

Loading

jdan commented Nov 13, 2016

jdan commented Nov 13, 2016 •

edited

Loading

Symbol entities like &rarr; do not render properly #248

Symbol entities like &rarr; do not render properly #248

Comments

jdan commented Nov 13, 2016 • edited Loading

jdan commented Nov 13, 2016 • edited Loading

nkzawa commented Nov 13, 2016 • edited Loading

nkzawa commented Nov 13, 2016 • edited Loading

jdan commented Nov 13, 2016

jdan commented Nov 13, 2016 • edited Loading

Symbol entities like → do not render properly #248

Symbol entities like → do not render properly #248

jdan commented Nov 13, 2016 •

edited

Loading

jdan commented Nov 13, 2016 •

edited

Loading

nkzawa commented Nov 13, 2016 •

edited

Loading

nkzawa commented Nov 13, 2016 •

edited

Loading

jdan commented Nov 13, 2016 •

edited

Loading