`Uncaught TypeError: Cannot read property 'textContent' of null` with SSR in next.js

Question

这是我的反应页面：

import { motion } from "framer-motion";
import styled from "styled-components";

const Outer = styled(motion.div)`
  height: 100vh;
  display: flex;
  place-items: center;
  background-color: #232323;
`;

const Inner = styled(motion.div)`
  height: 100px;
  width: 100px;
  background-color: cadetblue;
  border-radius: 5px;
`;

const Framer = () => (
  <Outer>
    <Inner>
      Hey
    </Inner>
  </Outer>
);

export default Framer;

它位于 next.js 应用程序的 /pages 文件夹下。

使用 <Inner>Hey</Inner>，一切正常，但将其更改为 <Inner />，并且在服务器上呈现时它始终给我 Uncaught TypeError: Cannot read property 'textContent' of null。

在我开始掌握 next.js 的过程中，这一直是个问题。这妨碍了我的生产。

错误在 next.js@9.2.0 和 next.js@9.1.7

上重现

<Outer>
  <h1>Hey</h1>
  <Inner />
</Outer>

经过上述测试并呈现良好。似乎 next.js 页需要一点文字！

Answer 1

删除 google chrome 扩展 JSON Viewer Awesome 似乎解决了这个问题。

解析为 JSON 没有文本，但呈现带有文本的标记。

`Uncaught TypeError: Cannot read property 'textContent' of null` with SSR in next.js

`Uncaught TypeError: Cannot read property 'textContent' of null` with SSR in next.js

reactjs

next.js