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

odtcviktorlivakivskyi commented 6 months ago

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:

You might have mismatching versions of React and the renderer (such as React DOM)

You might be breaking the Rules of Hooks

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 https://github.com/payloadcms/payload/issues/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

GRiDD commented 6 months ago

I also observed same issue with 2.14.1

DgitalNarrative commented 6 months ago

Also on the "e-commerce" template

kaptankorkut commented 6 months ago

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

denolfe commented 6 months ago

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

GRiDD commented 6 months ago

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

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

GRiDD commented 6 months ago

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

GRiDD commented 6 months ago

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" } }

finkinfridom commented 6 months ago

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.