React Helmet在Safari上白屏的解决方法

记录一个陈年老 bug。当时用 React Helmet 做了一个单页应用（SPA），在 Chrome 上能正常显示，但是在 Safari 中就白屏了。经过排查发现，原因是将 charset 的定义放在 <Helmet> 中了。由于 Helmet 中的内容都是通过 JavaScript 动态添加的，在运行 JavaScript 前，charset 没有被指定，Safari 按照默认字符集又无法解析 JavaScript，于是整个应用就白屏了。解决的办法也很简单，就是将 charset 的定义从 <Helmet> 移到 HtmlWebpackPlugin 模板文件的 <head> 中。

错误用法：

src/pages/app.tsx
1
2
3
4
5
return (
    <Helmet>
        <meta charSet="UTF-8"/>
    </Helmet>
);

正确用法:

src/templates/template.ejs
1
2
3
<head>
    <meta charset="utf-8"/>
</head>
React Helmet在Safari上白屏的解决方法
https://tomzhu.site/2022/01/26/React-Helmet在Safari上白屏的解决方法/
作者
Tom Zhu
发布于
2022年1月26日
许可协议