search

vercel / next.js

The React Framework
https://nextjs.org
MIT License
126.39k stars 26.9k forks source link

[Next.js 14] Script with strategy='beforeInteractive' will cause dynamic routing error #57660

Open promise96319 opened 12 months ago

promise96319 commented 12 months ago

Link to the code that reproduces this issue

https://github.com/promise96319/nextjs-dynamic-routing-error

To Reproduce

First, add a Script with strategy='beforeInteractive' in app/layout.tsx.

Secondly, click the a link navigating to a dynamic routing，it will throw an error.

Current vs. Expected behavior

When there is a script with strategy='beforeInteractive' and navigate to a dynamic routing, the dynamic routing segment has been encoded for twice，like /_next/static/chunks/app/post/%255BdocId%255D/page.js，but the correct file path is /_next/static/chunks/app/post/%5BdocId%5B/page.js. The dynamic routing segment is not encoded correctly.

Verify canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 21.6.0: Mon Apr 24 21:10:53 PDT 2023; root:xnu-8020.240.18.701.5~1/RELEASE_X86_64
Binaries:
  Node: 20.8.1
  npm: 10.1.0
  Yarn: 1.9.4
  pnpm: 8.9.0
Relevant Packages:
  next: 14.0.0
  eslint-config-next: 14.0.0
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.2.2
Next.js Config:
  output: N/A

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

Routing (next/router, next/navigation, next/link), Script optimization (next/script)

Additional context

No response

federicocappellotto97 commented 12 months ago

Oh my god, thanks, this was driving me crazy. I've been investigating for the last two days to understand why i have this error.. i didn't think the problem could be created from the strategy='beforeInteractive' If i go to the page through clicking a link i have the error, but if i refresh the page works Removing the script on layout.tsx the error seems to be disappeared

Coyenn commented 12 months ago

I do not use strategy='beforeInteractive' in my code but I also encountered this error. The fix in my case was to pin next to 13.5.4.

pawelbajgrowicz commented 11 months ago

@Coyenn I have this issue too, if i recall correctly issue started on 13.5.6 version.

stephane-pro commented 8 months ago

is there a workaround for this while it's being corrected ? It's driving me nuts!

Dalenir commented 7 months ago

Can confirm: still an issue, and I also tracked issue to 13.5.5/13.5.6 before finding this topic. As workaround I just putted my script to root layout.tsx in head tag (and disabled corresponding component)

<head>
    <script src="https://cool-script.js" />
</head>

Really hoping for fix