Hexo

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 ，也是醉了。

react-static