Uncaught TypeError: Cannot read property 'textContent' of null with SSR in next.js #10246
Description
Here is my react page:
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;
This is located under the /pages folder in a next.js app.
With <Inner>Hey</Inner>, it all works fine, but change this to <Inner /> and it consistently gives me Uncaught TypeError: Cannot read property 'textContent' of null when rendering on the server.
This has been a consistent problem whilst I'm getting to grips with next.js. It's hampering my production.
Error is reproduced on next.js@9.2.0 and next.js@9.1.7
<Outer>
<h1>Hey</h1>
<Inner />
</Outer>
Tested with above and renders fine. It would seem next.js pages need a little bit of text!
Initially asked on StackOverflow.