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...)