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

gcmastyq 于 2023-06-22 发布在其他

关注(0)|答案(4)|浏览(118)

**我正在以开发模式运行...**一个next.js应用程序。我有一个页面，它Map了来自后端的JSON数据，并为包含的每个'event'对象呈现一个组件'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)

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

**当我直接导航到URL而不点击链接...**一切都正确呈现，没有错误。
**当我尝试git bisect时...**这个错误阻止了我使用git bisect查找原因的尝试。我能回忆起的第一次发生是在三天前，但是当我检查一周前提交时，错误就在那里。我不能100%确定，但我不记得在提交时看到过这个错误。
**当代码在生产环境中运行时...**我无法复制代码，一切运行顺利
ServerSideRendering当前页面都没有超过准系统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>

next.js

来源：https://stackoverflow.com/questions/68939360/next-js-unhandled-runtime-error-failed-to-load-script-next-static-chunks

4条答案

按热度按时间

xfb7svmp1#

对于那些在谷歌上搜索（像我一样）并错过了@SimonGowing和@juliomalves沟通细节的人：我遇到了类似的错误，并使用了以下next/link：

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

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

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

赞(0）回复(0）举报 2023-06-22

wwodge7n2#

我没有测试这个，但评论部分不是这个区域。看起来您必须使用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错误页面404错误页面（Github）. https://github.com/vercel/next.js/issues/2208 .（于二零二一年八月二十六日查阅）。
404错误页面404错误页面（Github）. https://github.com/vercel/next.js/issues/2208#issuecomment-341107868.（2021年8月26日访问）。
404错误页面404错误页面（Github）. https://github.com/vercel/next.js/issues/2208#issuecomment-341939582.（2021年8月26日访问）。

赞(0）回复(0）举报 2023-06-22

332nm8kg3#

我的问题是，我为我的组件导入了一个组件，但该组件是完全空的。

赞(0）回复(0）举报 2023-06-22

rfbsl7qr4#

我也有同样的问题。来到这里寻找解决方案，原来，将链接组件从next/link交换到一个简单的a标签就可以了。

赞(0）回复(0）举报 2023-06-22