fetch error

[Eliav2]

first of all, thanks for this amazing repo!

so on my machine when running the nextjs frontend i immaterially encountered this error:

TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11118:11)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  cause: Error: connect ECONNREFUSED ::1:1337
      at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1300:16)
      at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:130:17) {
    errno: -4078,
    code: 'ECONNREFUSED',
    syscall: 'connect',
    address: '::1',
    port: 1337
  }
}
- error src\app\[lang]\utils\fetch-api.tsx (37:10) @ fetchAPI
- error Error: Please check if your server is running and you set all the required tokens.
    at fetchAPI (./src/app/[lang]/utils/fetch-api.tsx:34:15)
    at async getGlobal (./src/app/[lang]/layout.tsx:49:22)
    at async RootLayout (./src/app/[lang]/layout.tsx:68:20)
  35 |   } catch (error) {
  36 |     console.error(error);
> 37 |     throw new Error(`Please check if your server is running and you set all the required tokens.`);
     |          ^
  38 |   }
  39 | }

apparently Nodejs v17 and above uses IPv6 as default for fetch (see).

see the following demo in temporary nodejs terminal:

// ipv4 fails (localhost)
> url = 'http://localhost:1337/api/global?populate%5B0%5D=metadata.shareImage&populate%5B1%5D=favicon&populate%5B2%5D=navbar.links&populate%5B3%5D=navbar.navbarLogo.logoImg&populate%5B4%5D=footer.footerLogo.logoImg&populate%5B5%5D=footer.menuLinks&populate%5B6%5D=footer.legalLinks&populate%5B7%5D=footer.socialLinks&populate%5B8%5D=footer.categories';
'http://localhost:1337/api/global?populate%5B0%5D=metadata.shareImage&populate%5B1%5D=favicon&populate%5B2%5D=navbar.links&populate%5B3%5D=navbar.navbarLogo.logoImg&populate%5B4%5D=footer.footerLogo.logoImg&populate%5B5%5D=footer.menuLinks&populate%5B6%5D=footer.legalLinks&populate%5B7%5D=footer.socialLinks&populate%5B8%5D=footer.categories'
> fetch(url, fetchOptions)
Promise {
  <pending>,
  [Symbol(async_id_symbol)]: 872,
  [Symbol(trigger_async_id_symbol)]: 5
}
> Uncaught TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11118:11)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  cause: Error: connect ECONNREFUSED ::1:1337
      at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1300:16)
      at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:130:17) {
    errno: -4078,
    code: 'ECONNREFUSED',
    syscall: 'connect',
    address: '::1',
    port: 1337
  }
}
// works
> url = 'http://127.0.0.1:1337/api/global?populate%5B0%5D=metadata.shareImage&populate%5B1%5D=favicon&populate%5B2%5D=navbar.links&populate%5B3%5D=navbar.navbarLogo.logoImg&populate%5B4%5D=footer.footerLogo.logoImg&populate%5B5%5D=footer.menuLinks&populate%5B6%5D=footer.legalLinks&populate%5B7%5D=footer.socialLinks&populate%5B8%5D=footer.categories';
'http://127.0.0.1:1337/api/global?populate%5B0%5D=metadata.shareImage&populate%5B1%5D=favicon&populate%5B2%5D=navbar.links&populate%5B3%5D=navbar.navbarLogo.logoImg&populate%5B4%5D=footer.footerLogo.logoImg&populate%5B5%5D=footer.menuLinks&populate%5B6%5D=footer.legalLinks&populate%5B7%5D=footer.socialLinks&populate%5B8%5D=footer.categories'
> fetch(url, fetchOptions)
Promise {
  <pending>,
  [Symbol(async_id_symbol)]: 940,
  [Symbol(trigger_async_id_symbol)]: 5
}

by the way, using postman with the same url works perfectly well(because postman probably defaults to IPv4 on localhost):

the solution was setting NEXT_PUBLIC_STRAPI_API_URL=http://127.0.0.1:1337 in .env file.

NOTE: In the readme you probably written NEXT_STRAPI_API_URL instead of NEXT_PUBLIC_STRAPI_API_URL because this is the env the next app actually uses (NEXT_STRAPI_API_URL never used)

then you need to add '127.0.0.1' to remotePatterns and then the UI works perfectly.

[Marktawa]

@AbeezUrRehman has fixed the issue.
Thanks @Eliav2 for raising it.