Encountering an ECONNREFUSED error upon upgrading from Next.js 12 to 13

After upgrading from Nextjs 12 to 13, I am experiencing issues where every time I try to run the application, I encounter ECONNREFUSED to my local host but the port seems to keep changing. This results in the application not rendering properly.

> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4d29393d203e60383e3f202a20396038240d7d637c7f3">[email protected]</a> dev /run/media/rud31mp/drive2/Codes/typescript/dtpms/dtpms-usrmngr-ui
> next dev -p 3002

- ready started server on 0.0.0.0:3002, url: http://localhost:3002
- info Loaded env from /run/media/rud31mp/drive2/Codes/typescript/dtpms/dtpms-usrmngr-ui/.env.local
- warn Invalid next.config.js options detected: 
- warn     The root value has an unexpected property, externals, which is not in the list of allowed properties (amp, analyticsId, assetPrefix, basePath, cleanDistDir, compiler, compress, configOrigin, crossOrigin, devIndicators, distDir, env, eslint, excludeDefaultMomentLocales, experimental, exportPathMap, generateBuildId, generateEtags, headers, httpAgentOptions, i18n, images, modularizeImports, onDemandEntries, optimizeFonts, output, outputFileTracing, pageExtensions, poweredByHeader, productionBrowserSourceMaps, publicRuntimeConfig, reactStrictMode, redirects, rewrites, sassOptions, serverRuntimeConfig, skipMiddlewareUrlNormalize, skipTrailingSlashRedirect, staticPageGenerationTimeout, swcMinify, target, trailingSlash, transpilePackages, typescript, useFileSystemPublicRoutes, webpack).
- warn See more info here: https://nextjs.org/docs/messages/invalid-next-config
- event compiled client and server successfully in 1216 ms (311 modules)
- wait compiling...
- event compiled client and server successfully in 334 ms (311 modules)
- wait compiling /not-found (client and server)...
- event compiled client and server successfully in 694 ms (555 modules)
- warn Fast Refresh had to perform a full reload due to a runtime error.
- error Error: connect ECONNREFUSED 127.0.0.1:33241
    at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1487:16)
    at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:130:17) {
  errno: -111,
  code: 'ECONNREFUSED',
  syscall: 'connect',
  address: '127.0.0.1',
  port: 33241
}
- wait compiling /_error (client and server)...
- event compiled client and server successfully in 385 ms (556 modules)

https://i.sstatic.net/6vLHL.png

typescriptnext.jsnext.js13

Answer №1

It is possible that the issue stems from using node > v16. Consider reverting back to v16.

While this solution may not be perfect, it appears to be a timing issue between webpack's development environment and the request to start the environment.

I am currently in the process of further investigating this issue. Stay updated on any developments by following this thread

Answer №2

Have you tried utilizing the latest Google font feature in Next.js? Specifically, are you importing fonts using 'next/font/google'?

I encountered a similar issue when starting a new Next.js project with npx create-next-app@latest. The default layout.tsx file uses this new functionality:

import { Inter } from 'next/font/google'.

const inter = Inter({ subsets: ['latin'] })

I decided to comment it out and the error vanished. It appears that Next.js may struggle to connect to Google servers to fetch the fonts.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

invoke the next function a different privateFunction within rxjs

I'm trying to figure out how to pass the resetPassword data to the _confirmToUnlock method in Typescript/RxJS. Here is my subscribe method: public invokeUnlockModal() { let resetPassword = { userName: this.user?.userName}; //i need to send this ...

angulartypescriptrxjs

Refreshing HTTP request in Angular

I am currently working with Angular 5 and have encountered the following issue: Within my route, I have a parameter called year. The component related to this route is supposed to display data based on the year parameter, which is fetched from a service. ...

angulartypescripthttpobservable

Convert checkbox choices to strings stored in an array within an object

I have a intricate object structure JSON{ alpha{ array1[ obj1{}, obj2{} ] } } In addition to array1, I need to include another array: array2 that will only consist of strin ...

javascriptarraysangulartypescriptangular8

Is it possible to utilize [(ngModel)] in all components when including FormsModule in the app.module.ts file?

Is it possible to utilize [(ngModel)] in every component after importing FormsModule in app.module.ts? In app.module.ts import { FormsModule } from '@angular/forms'; Implementing in another component In view.component.html input type="text" ...

angulartypescript

Utilizing the powerful combination of TailwindCSS and Next.js Image to achieve a full height display with

Trying to utilize the Next.js' <Image> component with the layout=fill setting, I created a relative div housing the Image tag. However, I am looking for a way to set the height based on the Image's height. Came across this example, but the ...

cssnext.jstailwind-cssnextjs-image

Guide on redirecting users following authentication with NextAuth depending on a certain condition

I'm currently working on redirecting users to the dashboard "/" if their account is complete, otherwise to profile/edit/${session.user.id}. I am utilizing the SignIn callback to verify this condition. The redirection function is functional, however, I ...

next.jsnext-auth

Creating a circular array of raycast directions with HTML Canvas 2D

I'm currently working on implementing raycasting in typescript with HTML Canvas 2D based on the tutorial from this video: https://youtu.be/TOEi6T2mtHo. However, I've encountered an issue where the rays being cast consistently point in a single di ...

htmltypescripthtml5-canvasraycasting

Get image data from Next.JS API and show it in the web browser

I am looking to utilize my own next.js endpoints to request an image that I can then embed into my website. Currently, the issue I am facing is that the image seems to be immediately downloaded and does not display in the browser window. import type { Next ...

javascriptnode.jsrestnext.jsnext.js13

Error message in CodeSandBox with Angular: TypeError - The function html2canvas_1.default is not defined or recognized

Attempting to convert a basic html table into a PDF format within my project has resulted in unexpected errors when using CodeSandbox: ERROR TypeError: html2canvas_1.default is not a function at AppComponent.downloadPDF (https://3d3bh.csb.app/src/app/a ...

angulartypescriptjspdfhtml2canvascodesandbox

TypeScript introduces a new `prop` method that handles missing keys in objects

Is there a way to create a prop function that can return a default type if the specified key is not found in object o? type Prop = <K, O extends {}>(k: K, o: O) => K extends keyof O ? O[K] : 'Nah'; /* Argument of type 'K ...

typescriptmapped-types

What is the best way to connect to a JSON key that is consistently returned with a varying or unpredictable name?

I am currently working on an Angular 4.x application where my goal is to showcase a random Wikipedia article. Each time I check the JSON data in Chrome Dev Tools under query/pages, I notice that the pageID always has a different number. The structure of th ...

javascriptangularresttypescriptwikipedia-api

Strategies for setting the output value for a defined generic type

Is there a way to create a function that accepts optional properties common across different types, while also requiring specific properties based on the generic type passed in? type Diff<T, U> = T extends U ? never : T type DiffTypes<T, U> = ...

typescript

Next.js encountered an invalid src prop

Error: The src prop is invalid () on next/image, the hostname "scontent-atl3-2.xx.fbcd.net" has not been configured under images in your next.config.js For more information, visit: https://nextjs.org/docs/messages/next-image-unconfigured-host ...

javascriptnext.js

Entering information into fluctuating object fields

Suppose I have a dynamic object with a union type: data: {[key in 'num' | 'str' | 'obj']: number | string | object}; I set the object properties as follows: data.num = 1; data.str = 'text'; data.obj = {}; E ...

typescriptunions

Build a unique array of identifiers extracted from an object

https://i.sstatic.net/PaFXj.png I am seeking advice on how to extract an array of IDs values by iterating through an object in React JS. https://i.sstatic.net/GV6ga.png const initialState = useMemo(()=> { return dataTable.filter(result => f ...

javascriptreactjstypescriptantd

The string "ikm" must consist of at least one byte

https://example.com/errors#error1 "xyz" should have a minimum length of one character { message: '"xyz" should have a minimum length of 1', stack: 'TypeError: "xyz" should have a minimum length of 1\n' ...

next.jsnext-auth

Function in Typescript that accepts an array or a single instance of a constructor and then returns a list

UPDATE:: reproducible link to the TypeScript playground I have also found a solution in the provided link, but I am still open to learning why my initial approach didn't work. TLDR; This method does not yield the expected results getEntitiesByComp ...

typescriptgenericsentityentity-component-system

What is the best way to configure the loading state of my spinner?

When a user clicks to navigate to the articles page, I want to display a spinner while waiting for the articles data to be fetched and displayed. There is a slight delay after the click, hence the need for the spinner. I have a custom spinner component ca ...

javascriptreactjsnext.js

The process of linking a Json response to a table

In my products.components.ts class, I am retrieving Json data into the variable this.Getdata. ngOnInit() { this._service.getProducts(this.baseUrl) .subscribe(data => { this.Getdata=data this.products=data alert(JSON.stringify(this.Getdata)); ...

jsonangulartypescript

The typescript-eslint-parser does not officially support this version of TypeScript

I recently acquired an outdated AngularJs application that still relies on the legacy tools: bower and grunt. Upon executing grunt serve --reload, I encounter the following warning message: WARNING: You are currently running a version of TypeScript which ...

typescriptgruntjseslint