search

vercel / next.js

The React Framework
https://nextjs.org
MIT License
126.01k stars 26.87k forks source link

12.3.x causes `Collecting page data` to fail during build #40834

Open xzilja opened 2 years ago

xzilja commented 2 years ago

Verify canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 21.6.0: Mon Aug 22 20:20:05 PDT 2022; root:xnu-8020.140.49~2/RELEASE_ARM64_T8101
Binaries:
  Node: 18.8.0
  npm: 8.18.0
  Yarn: 1.22.19
  pnpm: N/A
Relevant packages:
  next: 12.3.1
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

After upgrading from 12.2.5 to 12.3.0 or 12.3.1 I started getting build errors during "Collecting page data" step. Error output includes

Generating static pages (0/3)TypeError: Cannot read properties of null (reading 'useContext') at exports.useContext
Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: Cannot read properties of null (reading 'useContext')

Expected Behavior

Should build without issues

Link to reproduction

https://github.com/WalletConnect/web3modal

To Reproduce

  1. Pull repository linked above
  2. Inside examples/react/package.json change next.js version to 12.3.1
  3. From root of the repo run npm install; npm run build
balazsorban44 commented 2 years ago

I could confirm an issue when using npm workspaces. Likely introduced by https://github.com/vercel/next.js/pull/39520 since the first release containing the problem is v12.2.6-canary.0.

Switching to pnpm works, so it's something to do with how npm workspaces handle the dependencies.

balazsorban44 commented 2 years ago

After some internal discussions, the issue seems to be that there are two copies of react, one in <root>/node_modules, and another <root>/examples/react/node_modules.

Could you try removing the node_modules folders and the package-lock.json file and re-run npm install; npm run build to clear it up?

xzilja commented 2 years ago

@balazsorban44 yeh, that was one of the first things I did when trying to debug this actually. Unfortunately issue still persists in 12.3.x

balazsorban44 commented 2 years ago

In your case there is a third directory/react instance in packages/react/node_modules did you remove that as well?

xzilja commented 2 years ago

Just tried again, essentially

  1. Removed package lockfile from root
  2. Deleted all node_modules in the project
  3. Updated nextjs version to 12.3.1
  4. Ran npm install (root)
  5. Ran npm run build (root)

Still failing, I noticed that after install total number of packages is 178, however with next 12.2.x it is 177

mmswi commented 1 year ago

Hey guys, I've had this issue also while creating an application with nx js and trying to import a library.

What I've discovered was that the nx js was creating the project without a _document.tsx and this was causing the errors for our project.

After I've added the _document.tsx file, the build worked.

Mahdiyeh commented 1 year ago

Hey guys, I've had this issue also while creating an application with nx js and trying to import a library.

What I've discovered was that the nx js was creating the project without a _document.tsx and this was causing the errors for our project.

After I've added the _document.tsx file, the build worked.

I have the _document.js file there and still build does not work. (next: ^12.1.2)

mmswi commented 1 year ago

It's important to have this structure: 

<Html lang="en">
    <Head />
    <body>
      <Main />
      <NextScript />
    </body>
  </Html>

Especially the Head from next, which includes the scripts

paulmuenzner commented 1 year ago

I was troubleshooting this "Collecting page data to fail during build" error too. In the end it turned out that I was initiating a circular dependency. Not even using it, just initiated. After removing it, the error was gone.