react-static html头部meta问题

事情起因

react-static 生成的项目默认有一个默认的 html 模板,目录: tmp/dev-server

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="en" data-reactroot="">

<head>
<meta charSet="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5, shrink-to-fit=no" />
</head>

<body>
<div id="root"></div>
</body>

</html>

然而,改这个文件然后 yarn run build 之后会发现,毫无变化。
找到官方文档,有这么一段说明:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// An optional custom React component that renders the base
// Document for every page, including the dev server. If used, it must utilize the
// `Html` , `Head` , `Body` and `children` for react-static to work. The optional
// `siteProps` prop will contain any data returned by `getSiteProps` in your config
// and `renderMeta` prop refers to any data you potentially assigned to it during
// the custom `renderToHtml` hook.
Document: ({ Html, Head, Body, children, siteProps, renderMeta }) => (
<Html lang="en-US">
<Head>
<meta charSet="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</Head>
<Body>{children}</Body>
</Html>
),

ok,开搞。

然而,事情并没有这么简单,加了这个配置后,问题又来了:

1
2
Exporting HTML across 4 threads...
ReferenceError: React is not defined

???
什么鬼?React-static里面没有引入React?开什么玩笑?
去网上找了找,并没有找到解决方案,倒是发现不少 react-static 的广告文。。。
得,只能自己动手。

解决方案

既然报了 React is not defined 错误,那我就个干脆手动引入吧。

1
import React from "react"

问题解决。

总结

react-static 不自动引入 React ,也是醉了。