Boiler plate app throws React error

samuelkilada commented 1 year ago

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

TheSamDickey commented 1 year ago

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!

DanRibbens commented 1 year ago

I cannot recreate the problem reported here. I tried switching back and forth between yarn and npm and running both with nodemon vs cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts nodemon.

I tested on Windows 11 Node 18.14.1 npm 9.3.1 yarn 1.22

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.

I'm not sure I understand this. Can you give the commands you used to create the problem?

sawden commented 1 year ago

I've got the same error and haven't been able to find a solution yet.

Steps to reproduce:

Run npx create-payload-app
Change to project directory
Start the Docker containers with docker-compose up
Access the admin URL at http://localhost:3000/admin

PatrikKozak commented 1 year ago

Hey @samuelkilada @sawden - I was unable to replicate the issue using the reproducible steps you two provided. I really appreciate you guys bringing this to our attention and we will keep our eyes on this.

I am going to close this for now, but if you guys can add more info for reproducing, I will definitely take another look.

samuelkilada commented 1 year ago

I cannot recreate the problem reported here. I tried switching back and forth between yarn and npm and running both with nodemon vs cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts nodemon.

I tested on Windows 11 Node 18.14.1 npm 9.3.1 yarn 1.22

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.

I'm not sure I understand this. Can you give the commands you used to create the problem?

What I was trying to say was that it only seems to break when you add a payload config file with some collections. That means when you are using "npx create-payload-app", which automatically adds a config file and some basic collections, it will cause the error to occur. But if you create it from scratch yourself and don't add the config file, it will work initially. But once you add a config file with a collection and run it, it will break. After that point it will remain broken even if you remove the config file. This tells me it is database related somehow because once a boilerplate collection is added it breaks.

I appreciate you looking. It sounds like I'm not the only one having this issue. It's very strange indeed but I'm sure we'll get to the bottom of it eventually. I am currently using yarn to get around it.

JarrodMFlesch commented 1 year ago

@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!

samuelkilada commented 1 year ago

I appreciate the help. Unfortunately I still get the error. It's now more critical to solve it because I'm trying to deploy to AWS elastic beanstalk and it's not quite as easy to use yarn there. I added the .npmrc file with the given line in it and made sure to deploy that file with my build but it's not seeming to solve the problem. :(

jmikrut commented 1 year ago

@samuelkilada super interesting. We will continue to dig here.

Just to be sure, you are confident that your .npmrc file is indeed in place in your build?

Do you have the ability to customize the npm install command? You can also run npm install --legacy-peer-deps and that is the equivalent of having that file in place. If you can adjust your install command, you should try that and see if that fixes it.

We'll report back with more shortly in any case!

creative-andrew commented 1 year ago

I had exactly the same issue.

I fixed it by adding command: sh -c "npm install --legacy-peer-deps && npm run dev" in the docker-compose.yml and deleting my node_modules and package-lock-json

jacobsfletch commented 1 year ago

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 🎉

samuelkilada commented 1 year ago

Thanks very much @jacobsfletch. Is there any way I can test with "npx create-payload-app" using 1.8.3-canary.0 specifically?

jacobsfletch commented 1 year ago

You won't be able to instantiate a new project with that version using npx but you could pin that version in an existing project within your package.json like this "payload": "1.8.3-canary.0". But I know defeats the purpose. A new patch version will be out soon, possibly today.

jacobsfletch commented 1 year ago

You could also run rm -rf node_modules && rm package-lock.json && npm i to verify that the --legacy-peer-deps flag is no longer required and that no dependency conflicts occur.

samuelkilada commented 1 year ago

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!