Next.js 未处理的运行时错误“无法加载脚本：/_next/static/chunks/...”仅在开发模式下触发答案

【问题标题】：Next.js Unhandled Runtime Error "Failed to load script: /_next/static/chunks/..." only triggered in dev modeNext.js 未处理的运行时错误“无法加载脚本：/_next/static/chunks/...”仅在开发模式下触发
【发布时间】：2021-10-26 13:32:24
【问题描述】：

我正在跑步…… 开发模式下的 next.js 应用程序。我有一个页面，它映射来自后端的 JSON 数据，并为包含的每个“事件”对象呈现一个组件“EventListItem”。

列表页面：

http://localhost:3000/6/events/2021-08-26
(http://localhost:3000/[cinemaId]/events/[[...date]])
内容根目录的路径：'pages/[cinemaId]/events/[[...date]]'

此列表项是可点击的，因此用户可以导航到包含“事件”对象的所有详细信息的详细信息页面。

详情页：

http://localhost:3000/6/events/detail/2021-08-26/152430
(http://localhost:3000/[cinemaId]/events/detail/[[...date]]/[[...slug]])
内容根目录的路径：'pages/[cinemaId]/events/detail/[...slug]'

处于开发模式... 当我点击链接时，在浏览器导航到正确的页面并正确呈现所有信息之前，我会暂时触发错误：

Unhandled Runtime Error
Error: Failed to load script: /_next/static/chunks/pages/%5BcinemaId%5D/events/detail/%5Bdate%5D/%5BeventTypeId%5D.js
Call Stack
appendScript/</script.onerror
node_modules/next/dist/client/route-loader.js (83:51)

但是，正如我所说，错误会短暂闪现，然后详细页面的内容会正确呈现。

当我直接导航到 URL 而不点击链接时……一切都正确呈现，没有错误。

当我尝试 git bisect... 这个错误阻止了我使用 git bisect 查找原因的尝试。我记得的第一次发生是三天前，但是当我从一个多星期前检查提交时，错误就在那里。我不能 100% 确定，但我不记得在进行这些提交时看到此错误。

当代码在生产环境中运行时... 我无法复制代码，一切运行顺利

服务器端渲染 目前，这两个页面都没有超过准系统 SSR 代码。目前，所有数据获取都在客户端完成。这会改变。

感谢您的阅读。任何见解都将非常受欢迎。代码在下面供参考...

组件中的链接：

<Link
href={{pathname: "/[cinemaId]/events/detail/[date]/[eventTypeId]",
query: {cinemaId: cinemaId, date: date, eventTypeId: showtime.eventTypeId}
}}
>
<a className="font-bold text-lg">{showtime.name}</a>
</Link>

【问题讨论】：

您能展示一下您的实际pages 文件夹结构吗？ Link 中的 pathname 值与您之前引用的页面路径不匹配。
@juliomalves 谢谢！ “来自内容根目录的路径”是 pages/[cinemaId]/events/detail/[...slug].tsx
我也看到了同样的情况。我尝试在 Link 组件的“as”属性中添加 URL，但这没有帮助。我的用例是一个带有动态 URL 的链接来下载文件。

标签： javascript reactjs next.js runtime-error server-side-rendering

【解决方案1】：

我没有对此进行测试，但评论部分不是这个区域。看起来您必须使用 Link 组件的 as 属性，因为您的路由方法可能会导致服务器在短时间内无法识别页面。尝试类似以下的操作：

<Link href={`/${cinemaId}/events/`} as={`/${cinemaId}/events/`}>
                                            <a className="opacity-50 hover:text-cyan hover:opacity-100">{t('Programm')}</a>
                                        </Link>

然后在渲染之前检查您是否有正确的链接。类似于以下内容：

if (pathname === '/${cinemaId}/events/') {
    app.render(req, res, '/user/signup', query)
}

提供的最后两个链接是我的答案，但其余线程有更多解释。

参考资料：

在页面加载之前得到奇怪的 404。（Github）。 https://github.com/vercel/next.js/issues/2208。（2021 年 8 月 26 日访问）。

在页面加载之前得到奇怪的 404。（Github）。 https://github.com/vercel/next.js/issues/2208#issuecomment-341107868。（2021 年 8 月 26 日访问）。

在页面加载之前得到奇怪的 404。（Github）。 https://github.com/vercel/next.js/issues/2208#issuecomment-341939582。（2021 年 8 月 26 日访问）。

【讨论】：

感谢@ShamarYarde，这非常有帮助并且接近解决它。正如您所说，链接绝对是问题所在。在第一种情况下，我设法通过简单地用模板文字替换 href 来避免错误，即 /${cinemaId}/events/detail/${date}/${showtime.eventTypeId}} > 这会正确导航到详细信息页面，但然后单击浏览器中的“返回”按钮是禁用。 URL 更新为正确的地址，但内容不会重新呈现。
关于将 'as' 属性添加到链接。我不确定我是否做对了。路由中的文件结构是“pages/[cinemaId]/events/detail/[...slug]”，但我尝试访问的 url 是（例如）localhost:3000/${cinemaId}/events/detail/${date}/${showtime.eventTypeId}。您能否帮助我了解 h-ref 中的内容和 as 中的内容。还是有我需要解决的文件结构问题？
"URL 更新到正确的地址，但内容不会重新呈现。" - 这可能是因为客户端导航没有获取新内容，这不是 Link 的问题，而是该页面组件内的代码。
@juliomalves 谢谢。我的意思是，当单击浏览器的“返回”按钮时，URL 会返回到我们之前所在的 [date] 页面的 URL，但内容仍然是我们单击的 [slug] 页面的内容。感觉就像 URL 的更改不会触发页面更改。但为什么这与我最初访问该页面时有所不同？
@SimonGowing 我有同样的问题→stackoverflow.com/q/69332663/6141587。你解决了吗？

【解决方案2】：

对于任何使用谷歌搜索（如我）并错过@SimonGowing 和@juliomalves 的通信细节的人：我遇到了类似的错误并使用了以下next/link：

<Link
  href={{
  pathname: "/categories/[category]",
  query: {
    category: category.path,
  },
}}>

将其更改为字符串文字解决了这个问题，我也没有返回按钮问题：

<Link href={`/categories/${category.path}`}>

【讨论】：

这解决了我的错误，谢谢！

【解决方案3】：

我遇到了同样的问题。来这里是为了找到解决方案，结果证明，将 Link 组件从 next/link 换成一个简单的 a 标签就可以了。

【讨论】：