Closed samuelkilada closed 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!
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?
I've got the same error and haven't been able to find a solution yet.
Steps to reproduce:
npx create-payload-app
docker-compose up
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.
I cannot recreate the problem reported here. I tried switching back and forth between yarn and npm and running both with
nodemon
vscross-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.
@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!
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. :(
@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!
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
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
š
Thanks very much @jacobsfletch. Is there any way I can test with "npx create-payload-app" using 1.8.3-canary.0 specifically?
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.
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.
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!
@jacobsfletch "1.8.3-canary.0" fix the problem. Thank you!
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!
This is now resolved and released in 1.8.3
š
I just upgraded to React 18.3.0 and got this issue. After downgrading again it was gone.
Still no release notes for 18.3.0:
Found the root cause: the React version is not consistent across the Payload packages.
https://github.com/search?q=repo%3Apayloadcms%2Fpayload%2018.2.0&type=code
For instance richtext-lexical requires 18.2.0 where others accept 18.3.0.
With a React update every two years such problems bite you at a later time :(
I have just run into this issue by updating react to 18.3.1. I'm now downgrading back to 18.2.0 as it seems that's the baseline.
I am facing the same issue. Anyone found a solution for this?
I have just run into this issue by updating react to 18.3.1. I'm now downgrading back to 18.2.0 as it seems that's the baseline.
This worked for me as well, thanks! Was pulling my hair out.
This issue has been automatically locked. Please open a new issue if this issue persists with any additional detail.
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:
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:
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