No idea why this isn't working. All I've done is create a payload project and run $ npm run dev
.
I am running a node instance on a machine on my local network, I have all ports open in ufw to my machine I'm currently working on.
Terminal Reports:
$ npm run dev > payload-blog-typescript@1.0.0 dev > cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts nodemon [nodemon] 2.0.19 [nodemon] to restart at any time, enter `rs` [nodemon] watching path(s): *.* [nodemon] watching extensions: ts [nodemon] starting `ts-node src/server.ts` [21:59:01] INFO (payload): Starting Payload... [21:59:02] INFO (payload): Payload Admin URL: http://localhost:3000/admin [21:59:02] INFO (payload): Connected to Mongo server successfully! webpack built f0d434148af6fe3871a0 in 1806ms webpack compiled successfully
The admin page loads and then both Chrome and Edge report:
api.js:5 GET http://localhost:3000/api/users/me net::ERR_CONNECTION_REFUSED
get @ api.js:5 fetchMe @ index.js:53 (anonymous) @ index.js:62 commitHookEffectListMount @ react-dom.development.js:23150 commitPassiveMountOnFiber @ react-dom.development.js:24931 commitPassiveMountEffects_complete @ react-dom.development.js:24891 commitPassiveMountEffects_begin @ react-dom.development.js:24878 commitPassiveMountEffects @ react-dom.development.js:24866 flushPassiveEffectsImpl @ react-dom.development.js:27039 flushPassiveEffects @ react-dom.development.js:26984 (anonymous) @ react-dom.development.js:26769 workLoop @ scheduler.development.js:266 flushWork @ scheduler.development.js:239 performWorkUntilDeadline @ scheduler.development.js:533
Uncaught (in promise) TypeError: Failed to fetch
at Object.get (api.js:5:1) at fetchMe (index.js:53:35) at index.js:62:1 at commitHookEffectListMount (react-dom.development.js:23150:1) at commitPassiveMountOnFiber (react-dom.development.js:24931:1) at commitPassiveMountEffects_complete (react-dom.development.js:24891:1) at commitPassiveMountEffects_begin (react-dom.development.js:24878:1) at commitPassiveMountEffects (react-dom.development.js:24866:1) at flushPassiveEffectsImpl (react-dom.development.js:27039:1) at flushPassiveEffects (react-dom.development.js:26984:1)
When Clicking on the Create button at localmachine:3000/admin/create-first-user
I get this error:
POST http://localhost:3000/api/users/first-register net::ERR_CONNECTION_REFUSED
post @ api.js:16 (anonymous) @ index.js:116 await in (anonymous) (async) onSubmit @ index.js:298 callCallback @ react-dom.development.js:4164 invokeGuardedCallbackDev @ react-dom.development.js:4213 invokeGuardedCallback @ react-dom.development.js:4277 invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:4291 executeDispatch @ react-dom.development.js:9041 processDispatchQueueItemsInOrder @ react-dom.development.js:9073 processDispatchQueue @ react-dom.development.js:9086 dispatchEventsForPlugins @ react-dom.development.js:9097 (anonymous) @ react-dom.development.js:9288 batchedUpdates$1 @ react-dom.development.js:26140 batchedUpdates @ react-dom.development.js:3991 dispatchEventForPluginEventSystem @ react-dom.development.js:9287 dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay @ react-dom.development.js:6465 dispatchEvent @ react-dom.development.js:6457 dispatchDiscreteEvent @ react-dom.development.js:6430
No idea how to troubleshoot the issue as I can't see any files or anyone else having this issue. I'm running v16 of nodejs and mongo is working correctly and has built the Database and collections. It seems as if Payload stumbled at the last hurdle and I have no idea what's causing it.
Anyone have any idea what's causing this?
Hey @GronsoBitburg — I think this sounds like it has to do with your local environment rather than Payload. it seems like you are not able to connect to localhost:3000
.
What I'd do is try and start a simple Express server listening on port 3000
and then try and load it in your browser to see if you can access it.
Create a new directory and put the following two files in it:
package.json
{
"name": "express-app",
"version": "1.0.0",
"description": "",
"main": "server.js",
"scripts": {
"start": "node server.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.18.1"
}
}
server.js
const express = require('express');
const expressApp = express();
expressApp.get('/', (_, res) => {
return res.send('Hello world');
})
expressApp.listen(3000, async () => {
console.log('Now listening on port 3000');
});
Then run npm install
and then node server.js
at your command line in that folder, and see if you can open up http://localhost:3000
in your browser. Does it say "Hello world"?
Hi James, thanks for the quick reply.
Yeah, the express app does indeed show 'Hello World'.
I can create a user via my browser on my server using localhost and have access to the admin page when using my server locally, but that is far from ideal.
As soon as I try to connect via my network, I can view the page http://192.168.50.93:3000/admin
that now only displays 'Loading' at the top left of the screen. Since I have successfully created a user it seems be stuck infinitely trying to fetch something.
with the following errors in chrome's dev tools:
[HMR] connected client.js:95
Failed to load resource: net::ERR_CONNECTION_REFUSED api.js:5
Uncaught (in promise) TypeError: Failed to fetch
Previously when faced with similar issues like this in environments such as Vue or Angular I would just use:
npm run dev --disable-host-check
or ng serve --host 0.0.0.0 --disableHostCheck
to remedy the issue.
I also tried to change serverURL: 'http://localhost:3000',
to serverURL: 'http://0.0.0.0:3000',
in payload.config.ts too but no dice. But I do get a different error though...
[HMR] connected client.js:95
api.js:5 GET http://0.0.0.0:3000/api/users/me net::ERR_ADDRESS_INVALID
Ah, you need to set your config's serverURL
to http://192.168.50.93:3000
. I think your serverURL
says localhost, is that right?
Yep, It was a CORS error. It only affected my site when it tried to access the api.
I Just couldn't figure it out there. Changing serverURL to suit my browser input did the trick. (I always login using my server name http://jupiter:3000/)
Thanks for your help, I really appreciate it.