Unable to create first user. Getting refused connection

GronsoBitburg

8 months ago

1 1

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?

Selected Answer
jmikrut
Payload Team
8 months ago
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"?
3 replies
GronsoBitburg
8 months ago
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
```
jmikrut
Payload Team
8 months ago
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?
GronsoBitburg
8 months ago
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.

Open the post

Continue the discussion in GitHub

Can't find what you're looking for?
Get help straight from the Payload team with an Enterprise License.Learn More