Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Admin Panel of "Payload Website Template" is not loading after fresh installation #6062

Closed
odtcviktorlivakivskyi opened this issue Apr 26, 2024 · 12 comments
Labels
status: needs-triage Possible bug which hasn't been reproduced yet

Comments

@odtcviktorlivakivskyi
Copy link

Link to reproduction

No response

Describe the Bug

I've created a fresh installation using the website template:
npx create-payload-app@latest my-project -t website

Then switched to the "my-project" folder and started Docker containers, after that successfully seeded the MongoDB inside of container.

Frontend is working without issues under http://localhost:3000/

But as soon as I try to open an admin panel under http://localhost:3000/admin - the page appears blank and following errors are shown in console:

react.development.js:209 Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

  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.
    

react.development.js:1618 Uncaught TypeError: Cannot read properties of null (reading 'useContext')
at useContext (react.development.js:1618:1)
at useLocation (react-router.js:907:1)
at AuthProvider (index.js:81:24)
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)

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

at AuthProvider (http://localhost:3000/admin/main.js:143998:25)
at ModalProvider (http://localhost:3000/admin/main.js:169822:29)
at Router (http://localhost:3000/admin/main.js:322446:30)
at BrowserRouter (http://localhost:3000/admin/main.js:321426:35)
at ScrollInfoProvider (http://localhost:3000/admin/main.js:205141:26)
at WindowInfoProvider (http://localhost:3000/admin/main.js:205418:29)
at ConfigProvider (http://localhost:3000/admin/main.js:144352:27)
at Root (http://localhost:3000/admin/main.js:119215:25)

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.

I've tried to update packages by running yarn upgrade - it didn't help.
Also tried to run the app without Docker, but directly from my machine - same result, frontend works, but admin not.
Found this ticket #707, added

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

to the package.json and run yarn upgrade again, but result was unfortunately the same.

Do you have an idea how to fix the issue?

To Reproduce

Fresh installation: npx create-payload-app@latest my-project -t website and yarn seed

Payload Version

2.14.1

Adapters and Plugins

No response

@odtcviktorlivakivskyi odtcviktorlivakivskyi added the status: needs-triage Possible bug which hasn't been reproduced yet label Apr 26, 2024
@GRiDD
Copy link

GRiDD commented Apr 26, 2024

I also observed same issue with 2.14.1

image

@DgitalNarrative
Copy link

Also on the "e-commerce" template
Screenshot 2024-04-26 at 19 45 35

@kaptankorkut
Copy link

kaptankorkut commented Apr 26, 2024

Experiencing the same issue with the website template. Fixed the react and react-dom version to 18.2.0. That fixed the issue.

@denolfe
Copy link
Member

denolfe commented Apr 26, 2024

Released v2.14.2 with a fix. Let me know if you still see the issue.

@denolfe denolfe closed this as completed Apr 26, 2024
@GRiDD
Copy link

GRiDD commented Apr 26, 2024

I see this error on console. this new error.
Just follow

npx create-payload-app@latest my-project -t website

image

@GRiDD
Copy link

GRiDD commented Apr 26, 2024

I created a brand new project and 2.14.2 admin console works file.

@GRiDD
Copy link

GRiDD commented Apr 26, 2024

The brand new project works fine.
But when I upgrade my existing app,
I am getting this error

Here are my dependencies

"dependencies": {
"@payloadcms/bundler-webpack": "^1.0.0",
"@payloadcms/db-postgres": "^0.x",
"@payloadcms/plugin-cloud": "^3.0.0",
"@payloadcms/plugin-nested-docs": "^1.0.8",
"@payloadcms/plugin-redirects": "^1.0.0",
"@payloadcms/plugin-seo": "^1.0.10",
"@payloadcms/richtext-slate": "^1.0.0",
"cross-env": "^7.0.3",
"dotenv": "^8.2.0",
"escape-html": "^1.0.3",
"express": "^4.19.2",
"next": "13.5.2",
"payload-admin-bar": "^1.0.6",
"qs": "6.11.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-hook-form": "7.45.4",
"react-router-dom": "5.3.4",
"@payloadcms/plugin-cloud-storage": "^1.1.2",
"@payloadcms/plugin-stripe": "^0.0.19",
"@stripe/react-stripe-js": "^1.16.3",
"@stripe/stripe-js": "^1.46.0",
"fast-xml-parser": "^4.3.5",
"jsonwebtoken": "^9.0.2",
"nodemailer-sendgrid": "^1.0.3",
"payload": "2.14.2",
"stream": "^0.0.2",
"stripe": "^10.2.0",
"util": "^0.12.5"
},
"devDependencies": {
"@next/eslint-plugin-next": "^13.1.6",
"@payloadcms/eslint-config": "^0.0.1",
"@swc/core": "1.3.76",
"@types/escape-html": "^1.0.2",
"@types/express": "^4.17.9",
"@types/node": "18.11.3",
"@types/qs": "^6.9.8",
"@types/react": "18.0.21",
"@typescript-eslint/eslint-plugin": "^5.51.0",
"@typescript-eslint/parser": "^5.51.0",
"copyfiles": "^2.4.1",
"eslint": "^8.19.0",
"eslint-config-prettier": "^8.5.0",
"eslint-import-resolver-alias": "^1.1.2",
"eslint-plugin-filenames": "^1.3.2",
"eslint-plugin-import": "2.25.4",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-simple-import-sort": "^10.0.0",
"nodemon": "^2.0.6",
"prettier": "^2.7.1",
"slate": "0.91.4",
"ts-node": "10.9.1",
"typescript": "^4.8.4"
}
}

image

@finkinfridom
Copy link
Contributor

we have dependabot in place for our project and even the latest 2.14.2 version triggers the above useContext error.
Now I added the react and react-dom resolutions to 18.2.0 and works as expected.

@sctgraham
Copy link

I'm experiencing the same issue with react and react-dom deps at 18.2.0.
Any workarounds ?

@jonisapp
Copy link

Please correct this issue before marking it as closed.
image

@denolfe
Copy link
Member

denolfe commented May 10, 2024

Not able to recreate this as is. We can continue with your issues on #6313

@cronin4392
Copy link

I've tried everything I can find and still cannot resolve this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
status: needs-triage Possible bug which hasn't been reproduced yet
Projects
None yet
Development

No branches or pull requests

9 participants