CODEWITHSUNDEEP
reactjsnext.js14
mujaffars
mujaffars

Reputation: 1479

Newly created Next.js app giving error URL.canParse is not a function

I have created Next.js app by the command npx create-next-app@latest after running it npm run dev, I am getting below error.

Uncaught TypeError: URL.canParse is not a function at getSocketUrl (webpack-internal:///(:3001/app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/internal/helpers/get-socket-url.js:23:13)

The app is created with Next.js version 14.2.11

I have tried to fix it by following suggestions provided by ChatGpt with no success. Tried below solutions

npm update next react react-dom

Clear Cache - rm -rf .next

Restart server - npm run dev

Upvotes: 6

Views: 3895

Answers (8)

Mazen Othman
Mazen Othman

Reputation: 53

vercel has fixed this issue in next 14.2.13.

So, you can upgrade your current version by editing "next" dependency version in your package.json file:

from:

"dependencies": {
//other packages
"next": "14.2.11"
}

to:

"dependencies": {
//other packages
"next": "14.2.13"
}

and then run the command:

npm update next

then run your app again. I hope this helpful

Upvotes: 0

MaZ
MaZ

Reputation: 1

The latest version fix the issue:

https://github.com/vercel/next.js/releases/tag/v14.2.13

  • feat: add polyfill of URL.canParse for browser compatibility (#70228)

Upvotes: 0

user3809632
user3809632

Reputation: 11

Agreed, downgrading to Next.js 14.2.10 resolves the issue. Hopefully, this will be addressed in the latest version of Next.js soon.

Upvotes: 0

josealvarez97
josealvarez97

Reputation: 135

I was having this issue only with Safari. Chrome and Opera GX worked just fine.

Node version I was using was v20.13.0. I tried upgrading to Node version to v22.9.0, and it didn't work.

Next.js version I was using was 14.2.11. In the end, downgrading next version to 14.2.10 worked.

There was no need to touch eslint-config-next, which I left at 14.2.11 in my package.json.

Upvotes: 0

JsWizard
JsWizard

Reputation: 1749

Please update Next to the latest version. Also, don't forget to update your web browser as well.

Upvotes: -1

Xavier Rincon Rico
Xavier Rincon Rico

Reputation: 51

Downgrading nextjs version to 14.2.10 works.

Upvotes: 3

Kurma Saideep
Kurma Saideep

Reputation: 1

downgrade nextjs version from "next": "14.2.11" to "next": "14.2.10" and "eslint-config-next": "14.2.11" to "eslint-config-next": "14.2.11" downgrading to stable nextjs version works whenever installing a new nextjs project

Upvotes: 0

Carsten Codes
Carsten Codes

Reputation: 131

A similiar issue suggest checking/updating your node-version as well as upgrading @types/node. This might work for you, too.

According to Node.js URL.canParse was added in: v19.9.0, v18.17.0.

You can run node -v in your terminal to check your current Node version.

Upvotes: 1

Related Questions