node.jsnext.jslocalhostpocketbaseundici

Fetch request to PocketBase fails from terminal but works in Postman and the browser | Next.js13


I'm building a Next.js app using create-next-app@latest with PocketBase as the database.

My Problem is that my local PocketBase instance refuses the connection from my NextJS app, but has no problem retrieving data when I fetch it using Postman or the browser. The issue seems to have to do with the undici library though I'm not certain if its the actual source of the issue.

The fetch request only seems to fail when I try connecting to localhost, but any external links such as google.com work fine.

Here are the code snippets that cause the error

async function getNotes(){
    const res = await fetch('http://localhost:8090/api/collections/notes/records');
    const data = res.json();
    return data;
}
import PocketBase from 'pocketbase';

async function getNotes(){
        const pb = new PocketBase('http://127.0.0.1:8090')
        const list = await pb.collection('notes').getList(1, 100, {});
        return list;
}

Error log when using the built-in fetch API

TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11457:11)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  cause: Error: connect ECONNREFUSED 127.0.0.1:8090
      at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1494:16)
      at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:130:17) {
    errno: -111,
    code: 'ECONNREFUSED',
    syscall: 'connect',
    address: '127.0.0.1',
    port: 8090
  }
}

Error log when using the PocketBase ORM

ClientResponseError 0: Something went wrong while processing your request.
    at new ClientResponseError (webpack-internal:///(sc_server)/./node_modules/pocketbase/dist/pocketbase.es.mjs:161:23)
    at eval (webpack-internal:///(sc_server)/./node_modules/pocketbase/dist/pocketbase.es.mjs:1619:39)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async getNotes (webpack-internal:///(sc_server)/./app/notes/page.tsx:21:22)
    at async NotesPage (webpack-internal:///(sc_server)/./app/notes/page.tsx:31:19) {
  url: '',
  status: 0,
  response: {},
  isAbort: false,
  originalError: TypeError: fetch failed
      at Object.fetch (node:internal/deps/undici/undici:11576:11)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
    cause: Error: connect ECONNREFUSED 127.0.0.1:8090
        at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1574:16)
        at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:130:17) {
      errno: -111,
      code: 'ECONNREFUSED',
      syscall: 'connect',
      address: '127.0.0.1',
      port: 8090
    }
  }
}

Error log when using the 'node-fetch' npm library (the error log doesn't include Undici this time)

FetchError: request to http://127.0.0.1:8090/api/collections/notes/records?page=1&perPage=30 failed, reason: connect ECONNREFUSED 127.0.0.1:8090
    at ClientRequest.eval (webpack-internal:///(sc_server)/./node_modules/node-fetch/src/index.js:124:20)      
    at ClientRequest.emit (node:events:511:28)
    at Socket.socketErrorListener (node:_http_client:495:9)
    at Socket.emit (node:events:511:28)
    at emitErrorNT (node:internal/streams/destroy:151:8)
    at emitErrorCloseNT (node:internal/streams/destroy:116:3)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
  type: 'system',
  errno: 'ECONNREFUSED',
  code: 'ECONNREFUSED',
  erroredSysCall: 'connect'
}

I've tried just about everything I could find such as:
1. Changing node versions and updating local and global npm packages
2. Using 3rd party libraries such as 'node-fetch' and 'axios' to connect to the database. 3. Connecting to the database using the PocketBase npm package (ORM) and also using just the fetch API after running PocketBase. Note that the admin panel works fine.
4. Changing between http://localhost:.... and http://127.0.0.1:... urls gives exactly the same results.


Solution

  • I wasn't able to pin point the source of the issue,

    However, it seems that switching to a non-chromium based browser is a valid workaround for the time being

    This is the github issue with more information about the problem