payload: Boiler plate app throws React error

Link to reproduction

https://www.npmjs.com/package/create-payload-app

To Reproduce

NOTE: This appears to only happen with npm. I know yarn is an option, but the Payload site does say that either can be used and I much prefer npm. 😃

Running node 18.15.0 on Windows 11:

Run “npx create-payload-app”
Select the “blank” template.
Provide a mongodb connection
Start the server with “npm run dev”

Server should start up and successfully connect to mongodb.

Describe the Bug

When navigating to localhost:3000/admin, the browser (Edge and Chrome) doesn’t render anything and simply throws:

Uncaught Error: 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://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.
    at resolveDispatcher (react.development.js:1465:1)
    at useReducer (react.development.js:1500:1)
    at useToastContainer (react-toastify.esm.js:251:31)
    at ToastContainer (react-toastify.esm.js:1026: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)
resolveDispatcher @ react.development.js:1465
useReducer @ react.development.js:1500
useToastContainer @ react-toastify.esm.js:251
ToastContainer @ react-toastify.esm.js:1026
renderWithHooks @ react-dom.development.js:16305
mountIndeterminateComponent @ react-dom.development.js:20074
beginWork @ react-dom.development.js:21587
callCallback @ react-dom.development.js:4164
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
beginWork$1 @ react-dom.development.js:27451
performUnitOfWork @ react-dom.development.js:26560
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
performConcurrentWorkOnRoot @ react-dom.development.js:25738
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533

EDIT: as a follow up note, if you create from scratch and don’t add any payload config file, it will successfully render the page and you can create an account. This is when simply setting the “dev” script to “nodemon”. However, if you update the dev script to “cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts nodemon” and reference a config file with collections in it, it breaks. Then, if you switch the command back to “nodemon”, it still fails. This tells me that referencing the config file and creating the database collections somehow results in the error (it is a data-driven error).

Payload Version

1.7.2

About this issue

Original URL
State: closed
Created a year ago
Reactions: 3
Comments: 19 (9 by maintainers)

Most upvoted comments

@samuelkilada So, I was able to reproduce your issue. It stems from some of our dependencies using older versions of react. Here is an example, @dnd/core is using ^16.8.0. We would need that repo and a few others to update or add peerDependencies to their package.json files.

A workaround for now is installing npm packages with the --legacy-peer-deps flag. Normally people will use .npmrc files to do this. So you would create a file named .npmrc in the root of your project like so:

--legacy-peer-deps=true

Here is a bit more information about when npm removed this default behavior. This should get you going in the right direction. You could always use yarn which ships out of the box with these template too 👍

Let us know if we can do anything else for ya!

JarrodMFlesch on May 1, 2023

Just dropping by this thread to say that damn, I am so happy to hear this. Peer dependency conflicts are so annoying. PUMPED to see them resolved!

Patch version coming soon!

jmikrut on May 23, 2023

This is now resolved and released in 1.8.3 😎

jmikrut on May 24, 2023

@jacobsfletch “1.8.3-canary.0” fix the problem. Thank you!

fabioquarantini on May 23, 2023

I tried this out by using the npx create command above but then manually switching out the payload version to the one you mentioned. It appears to work. Thank you!

samuelkilada on May 22, 2023

https://github.com/payloadcms/payload/pull/2656 was just merged, it should resolve all these dependency conflicts. There’s a canary out now for anyone who is able to try it out 1.8.3-canary.0 🎉

jacobsfletch on May 18, 2023

Hi Sam, nice name! I ran into the exact same situation just now. I deleted node_modules and installed the dependencies using yarn, and I am no longer running into the React runtime issue. Thank you for the suggestion!

TheSamDickey on Apr 27, 2023