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

[ianhaggerty]

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.[email protected] and next.[email protected]

<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.

[Timer]

Can you please provide a full reproducible demo?

[ianhaggerty]

Removing the google chrome extension JSON Viewer Awesome seems to have fixed this.

Parses as JSON without text, but renders markup with text.

[Timer]

Seems like there's nothing for us to do then? Feel free to send a PR if you can somehow make this error go away, or file upstream.

[ianhaggerty]

I'm struggling to reproduce myself. Will close for now.

[Iodine-]

For anyone arriving here from google as I did when searching for my issue:

Removing the google chrome extension JSON Viewer Awesome seems to have fixed this.

was my issue as well. This is not a nextjs issue by any means, just a over-eager chrome extension (relevant issue)