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

Question

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

\n

列表页面：

\n

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

\n

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

\n

详细页面：

\n

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

\n

在开发模式下... \n当我单击链接时，在浏览器导航到正确页面并正确呈现所有信息之前，我会立即触发错误：

\n

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

\n

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

\n

当我直接导航到 URL 而不单击链接\xe2\x80\xa6 时，一切都会正确呈现，没有错误。

\n

当我尝试 git bisect... \n这个错误阻止了我使用 git bisect 查找原因的尝试。我记得第一次发生是在三天前，但是当我签出一周前的提交时，错误就出现了。我不能 100% 确定，但我不记得在进行这些提交时看到过此错误。

\n

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

\n

服务器端渲染 \n当前两个页面都只有准系统 SSR 代码。目前，所有数据获取都是在客户端完成的。这将会改变。

\n

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

\n

组件中的链接：

\n

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

\n

Answer 1

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

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

将其更改为字符串文字解决了问题，并且我也没有后退按钮问题：

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

Answer 2

我没有测试这个，但评论部分不是这个区域。看来您必须使用 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 日）。