Payload Admin Webpage not Loading?

[joecaraccio]

Bug Report

I simply have an instance of payload running in an express server running on a doctor container. Virtually nothing special on the setup.

When I load the webpage, it seems like the background of the panel renders.. but nothing else

I noticied some react related errors in the console, but have no other useful information in the command line.

Few of the errors:

That uncaught promise at the bottom looks like its the culprit.. any idea why?

Thanks!

[ayusshrathore]

Hey!
I faced this issue too recently, try checking the versions for react and react-dom. They might be mismatching. And share your code if possible, there might be some error while importing the component in payload config.

[DanRibbens]

@joecaraccio could you share your repo for me to take a look at it? We have other discussions that include working docker configs and I'm happy to help with that if it is the cause.

You can check the react versions using npm view react versions.

It shouldn't matter whether you're using npm or yarn, either should work, but if there are differences between the two we want to address them. In the last patch we have support pnpm also.

[joecaraccio]

@DanRibbens
Thanks for the reply! @ayusshrathore pointed out my exact issue.. but I'll use that command in the feature!

[joecaraccio]

Mismatching react versions

[joecaraccio]

@joecaraccio could you share your repo for me to take a look at it? We have other discussions that include working docker configs and I'm happy to help with that if it is the cause.

You can check the react versions using npm view react versions.

It shouldn't matter whether you're using npm or yarn, either should work, but if there are differences between the two we want to address them. In the last patch we have support pnpm also.

I think I am seeing it again unfortunately.

Can you elaborate a little bit on what I should be checking? Mismatching versions between react and react-dom?

Any other potential causes?

[joecaraccio]

[joecaraccio]

"In order for Hooks to work, the react import from your application code needs to resolve to the same module as the react import from inside the react-dom package.

If these react imports resolve to two different exports objects, you will see this warning. This may happen if you accidentally end up with two copies of the react package."

I'm trying to make sense of this, but wondering if these conflicting versions is part of the issue?

[joecaraccio]

so I just used yarn and added a dependency:

"resolutions": {
"react": "18.2.0"
},

which seemed to solve it!

[jmikrut]

Ahh nice. Yeah @joecaraccio in my experience, this is almost 100% of the time caused by having more than one copy of React installed, which your resolutions fix.

I will move this to a discussion so we keep it around in case anyone else runs into this!

[jshuadvd]

Hey everyone!

FYI I tried plugging the app I am developing into the beta version 0.20.8-beta.0 and I am also not able to access the /admin page. Just keeps throwing a 404. I even tested with a fresh copy of the Next & Payload boilerplate and have the same result. 0.20.1 is fine though...

[tststs]

imo both fixes for this issues (npm vs. yarn) should be documented somehow. i was hyped trying out 1.0 and immediately was facing this issue and needed to find a closed issue which let me here. this is not an problem with people installing 2 versions of react its a problem with dependencies required by payload.

npm

  "overrides": {
    "react": "18.2.0"
  }

yarn

  "resolutions": {
    "react": "18.2.0"
  }

[tststs]

Yes, a brand new install with create-payload-app. This happens without any modification right after npm i and npm run dev.
Using Node 18.6.0 alpine docker image.

Cheers

[DanRibbens]

We were able to run a new npx create-payload-app using npm and everything started, without the react version problems. Are you able to run it locally without docker?

If so you can share your docker .yml and we'll look into it more.

[AshSimmonds]

Also getting blank admin page with bunch of errors in the console, have tried create-payload-app twice in last hour, one with local mongodb, one with Atlas provisioned, same results.

https://github.com/AshSimmonds/payload-teste02

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
    at resolveDispatcher (react.development.js:1476:1)
    at useRef (react.development.js:1515:1)
    at WindowInfoProvider (index.js:72:1)
    at renderWithHooks (react-dom.development.js:16305:1)
    at mountIndeterminateComponent (react-dom.development.js:20074:1)
    at beginWork (react-dom.development.js:21587:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at beginWork$1 (react-dom.development.js:27451:1)

The above error occurred in the <WindowInfoProvider> component:

    at WindowInfoProvider (http://localhost:3000/admin/main.js:3087:29)
    at ConfigProvider (http://localhost:3000/admin/main.js:16470:27)
    at Index

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:18687

react-dom.development.js:18687 The above error occurred in the <ToastContainer> component:

    at ToastContainer (http://localhost:3000/admin/main.js:93396:28)
    at Index

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

[AshSimmonds]

Ok I re-read further up the chain, put:

"overrides": {
    "react": "18.2.0"
}

Into package.json then npm install and npm run dev and the admin panel is showing up with the create first user prompt.

[jmikrut]

OK so we just figured out how to recreate this. If you npm install, you'll be able to reproduce.

But, if you npm install --legacy-peer-deps, it works. And, if you yarn, it also works. Just npm install without --legacy-peer-deps is what breaks.

We should be able to sort this out directly within Payload - but in the interim, the overrides fix is great! We're on it!