Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

_document.js does not work for React.JS v18

See original GitHub issue

Verify canary release

I verified that the issue exists in Next.js canary release

Provide environment information

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 21.4.0: Mon Feb 21 20:36:53 PST 2022; root:xnu-8020.101.4~2/RELEASE_ARM64_T8101
    Binaries:
      Node: 17.8.0
      npm: 8.5.5
      Yarn: 1.22.18
      pnpm: N/A
    Relevant packages:
      next: 12.1.2
      react: 18.0.0
      react-dom: 18.0.0

Describe the Bug

_document.js does not work for React.JS v18

Expected Behavior

_document.js and components such as next/head should work for React.JS v18

To Reproduce

create a basic next.js project and create a _document.js file in /pages.

Issue Analytics

State:
Created a year ago
Reactions:11
Comments:5 (3 by maintainers)

Top GitHub Comments

6reactions

SukkaWcommented, Mar 30, 2022

Have you tried react@18 with next@12.1.1?

I have run into a similar issue, and downgrading to next@12.1.1 the issue is gone. I am still comparing the changes to see which change might cause the issue.

Update

The custom _document.js doesn’t work on 12.1.2-canary.0, too. So the change that causes the issue is between 12.1.1 and 12.1.2-canary.0.

Update

The change related to the issue is https://github.com/vercel/next.js/commit/4f6bb5e4fa432692d4ac54c302e4eee8534c5960.

Custom _document.js (class component + getInitialProps) is not compatible with React 18 Stream SSR at the moment. However, since the commit mentioned above, Next.js now always uses Stream SSR when React 18 is installed, thus causing the issue.

It also means that any feature provided by Next.js that is not yet supported by React 18 (E.g. next/head) will stop working.

5reactions

timneutkenscommented, Mar 30, 2022

We’re working on a fix for this issue in #35736. Will be out on stable today 🙏

Top Results From Across the Web

Reactjs: document is not defined - javascript

document won't be defined when rendering on the server - try wrapping the React.render() call in if(typeof window !== 'undefined') { } ....

React v18.0 – React Blog

In React 18, you can start using Suspense for data fetching in opinionated frameworks like Relay, Next.js, Hydrogen, or Remix. Ad hoc data ......

Upgrade to react 18 — Issues and resolution - Dev Genius

Resolution: Made React.StrictMode component a child/descendent of Provider component in my src/index.js file. There are some significant updates to ...

Getting started with React - Learn web development | MDN

js , the file starts by importing all the JS modules and other assets it needs to run. The first two statements import...

Add support for React 18 #17831 - storybookjs/storybook

... problem? Please describe Only so far as upgrading to React 18 is concerned ... ReferenceError: require is not defined at preview.js:1:1 ...