Cannot build with URL.canParse function

[Semanual]

Link to the code that reproduces this issue

https://github.com/Semanual/canparse_github_issue

To Reproduce

1. Run npm run build
2. It throws an error "Property 'canParse' does not exist"

Current vs. Expected behavior

Current:
An error is thrown, as if function URL.canParse didn't exist.

Expected:
Should build with no problems, as per mozilla docs this function is built-in.

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #44~22.04.1-Ubuntu SMP PREEMPT_DYNAMIC Mon May 22 13:39:36 UTC 2
  Available memory (MB): 15852
  Available CPU cores: 16
Binaries:
  Node: 22.1.0
  npm: 10.7.0
  Yarn: 1.22.19
  pnpm: N/A
Relevant Packages:
  next: 14.3.0-canary.40 // Latest available version is detected (14.3.0-canary.40).
  eslint-config-next: N/A
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.1.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Not sure

Which stage(s) are affected? (Select all that apply)

next build (local)

Additional context

I tested with next dev too, and it works as expected. For some reason, it only gives this error in next build.

[icyJoseph]

Aha, this requires Node 19...

Could you share more of the error? I will try to find it in the codebase as well.

I thought this was in the Next.js codebase, but it is in yours.

Let's see, you have Node 22 🤔

[Semanual]

Yeah, I've seen a similar error here, but they are using v16, v22 shouldn't have any problems.

[icyJoseph]

Do other versions trigger this error as well? Otherwise I think maybe some core team members should chime in.

[Semanual]

Just tested out with the latest LTS, v20.12.2, same error

[icyJoseph]

Well, it worked on 22.1.0 on MacOS, no problem.

[icyJoseph]

Using this Page:

export default function Home() {
  console.log("can parse:", URL.canParse("https://example.com/"));
  console.log(process.versions.node);
  return null;

The build output contains:

   Generating static pages (0/5)  [    ]
can parse: true
22.1.0

can parse: true
22.1.0
 ✓ Generating static pages (5/5)

[Semanual]

For me, this is the output:

$ npm run dev  

> dev
> next dev

  ▲ Next.js 14.3.0-canary.40
  - Local:        http://localhost:3000

 ✓ Starting...
 ✓ Ready in 867ms
 ○ Compiling / ...
 ✓ Compiled / in 1050ms (434 modules)
can parse: true
22.1.0
 GET / 200 in 1156ms

Works as intended, but:

$ npm run build

> build
> next build

  ▲ Next.js 14.3.0-canary.40

   Creating an optimized production build ...
 ✓ Compiled successfully
   Linting and checking validity of types  .Failed to compile.

./app/page.tsx:3:33
Type error: Property 'canParse' does not exist on type '{ new (url: string | URL, base?: string | URL): URL; prototype: URL; createObjectURL(obj: Blob | MediaSource): string; revokeObjectURL(url: string): void; }'.

  1 | /** Add your relevant code here for the issue to reproduce */
  2 | export default function Home() {
> 3 |   console.log("can parse:", URL.canParse("https://example.com/"));
    |                                 ^
  4 |   console.log(process.versions.node);
  5 |   return null;
  6 | }

The build still fails

[r34son]

Try to upgrade '@types/node'

[Semanual]

Now it works, thank you! But well, the repo successfully reproduced the problem, so I guess it's template should also be updated?

[icyJoseph]

Right, so it was a TS issue. Where did the template come from?

[Semanual]

From npx create-next-app -e reproduction-template.

[icyJoseph]

Yeah, I don't know about that, feels like that's something that reporting parties should look into. I think Next.js officially, still supports 18.x.x ~ anyway, no issue was found here then :)

[Semanual]

Well, okay then, feel free to close as you see fit then (I'm not sure if this is a "won't fix" or a "fixed", so...)

[allicanseenow]

The issue happens with next v14.2.11 even with next dev, while still working with 14.2.10, which makes 14.2.11 an unstable version for me. Tested with node.js LTS 20.17.0 and the latest version 22.8.0

[zhuchaokn]

The issue happens with next v14.2.11 even with next dev, while still working with 14.2.10, which makes 14.2.11 an unstable version for me. Tested with node.js LTS 20.17.0 and the latest version 22.8.0

Downgrade the next version from 14.2.11 to 14.2.10.
It works for me.
Same version test of node.

[saideep1011]

@zhuchaokn that worked

[srghma]

my chrome browser doesnt support URL.canParse, had error thrown in browser, fixed by downgrading to 14.2.10

[TrungNV31197]

Try this. I ran this command to update the NextJS version. It helped me resolve this error after one day of debugging.

npm i next@rc react@rc react-dom@rc eslint-config-next@rc --force

[huozhi]

Fixed in #70215 , we'll plan to backport the change to fix the regression on 14.2.11

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.