Next.js: 无法在开发中导航（路由器在一段时间后挂起）

创建于 2018-11-05  ·  50评论  ·  资料来源: vercel/next.js

错误报告

描述错误

在执行客户端路由时， Link或Router停止工作。 似乎HMR可能正在中断页面之间的转换。 如果应用处于闲置状态或在后台停留了一段时间，则发生频率最高（尽管我在没有闲置的情况下单击鼠标时经历了这种情况）

重现

重现行为的步骤，请提供代码段或存储库：

  1. 克隆此仓库（https://github.com/malimccalla/next-routing-issue）
  2. 安装依赖项npm install
  3. 运行服务器npm run dev
  4. 通过单击链接访问所有页面
  5. 去煮咖啡（将页面闲置约2分钟）
  6. 点击链接尝试访问所有页面
  7. 某些链接不会导航到其各自的页面😔

预期行为

我希望能够访问所有单个页面

实际行为

页面无法导航到某些路线。 刷新页面即可修复它

屏幕截图

“关于”和“联系”链接均不起作用（请注意，每条路线的首次尝试均会在HMR日志上显示）。 页面刷新后，它们将按预期工作。 如果我再次将应用程序闲置大约2分钟，它将重新开始该问题

next-issue

系统信息

  • mac Mojave 10.14
  • 铬
  • next.js v7.0.2

其他背景

打开控制台后，您会看到路由器事件routeChangeStart会触发，但routeChangeComplete不会触发。

bug p1
资料来源
picture malimccalla
👍119 👀8

最有用的评论

我正在调查此问题。

picture timneutkens 于 2019-01-03
👍21 ❤9 🎉4

所有50条评论

我有同样的问题

dankythuat picture dankythuat 于 2018-11-09

我也在生产环境中看到了这种情况，所以不确定HMR是否是造成此问题的唯一原因

ernerock picture ernerock 于 2018-11-10
👍2

@ernerock我在这里部署了上面的示例

malimccalla picture malimccalla 于 2018-11-10

@malimccalla似乎我的问题与您的不同，但是导航行为是相同的。 当我导航到的页面具有CSS导入时

import 'react-alice-carousel/lib/alice-carousel.css';

导航行为与您报告的相同。 似乎是'@ zeit / next-css'的问题

似乎已在＃5291中报告，可以通过在_app.js中导入和清空CSS文件来临时“解决”

ernerock picture ernerock 于 2018-11-10
👍10 🎉5 🚀3

@ernerock非常奇怪，它们可能以某种回旋方式联系

malimccalla picture malimccalla 于 2018-11-13

同样的问题，我将页面设置为/ home和/ home / subpage，然后如果我尝试使用Router.push，Router HOC甚至从Link从/ home导航到/ home / subpage，甚至无法使用Link。

好的，现在我有了更多信息，我尝试将/ home重命名为/ home / welcome，上述情况对我仍然不起作用

matejkonrad picture matejkonrad 于 2018-11-14

@ maciej-ka啊，是的，我可以确认它也与push一起发生，而不仅仅是Link 。 会更改标题，因为它有点误导。

@timneutkens对不起，@您我知道还有很多其他问题，但有机会我们对此有所关注吗？ 我已经尝试了一周了，但没有运气，这确实阻碍了发展

malimccalla picture malimccalla 于 2018-11-14

它最可能与按需输入及其处理有关

timneutkens picture timneutkens 于 2018-11-14

我做了一些挖掘工作，似乎是由于处理了页面而发生的。 该日志一出现，就无法再导航到

> Disposing inactive page(s): /

今晚我有一点时间进行更深入的探讨，并希望可以打开PR进行修复。 @timneutkens感谢您的初步见解，如果您认为我应该特别注意该文件的任何部分，请告诉我

malimccalla picture malimccalla 于 2018-11-15
👍9

我确实有尝试解决此问题的方法，但是相关文件中发生了很多事情，不幸的是我无法完全了解它。 对于其他遇到此问题的人，作为当前的解决方法，我在next.config.js使用此配置来延长处理页面之前的持续时间。

  onDemandEntries: {
    // period (in ms) where the server will keep pages in the buffer
    maxInactiveAge: 25 * 1000,
    // number of pages that should be kept simultaneously without being disposed
    pagesBufferLength: 5,
  },
malimccalla picture malimccalla 于 2018-11-18
👍6 👎1

我也有这个问题。

hiovi picture hiovi 于 2018-11-18

有人在调查吗？ 我也有这个问题，但不一定适用于所有路线。 哪个路由不响应是随机的，但最终都会响应。

serendipity1004 picture serendipity1004 于 2018-11-18

我正在关注下一个服务器/ lambdas问题时，现在无法研究它，但它很可能与按需输入有关。

是的，肯定是。 处置后发生。

tomsseisums picture tomsseisums 于 2018-11-20

和我一样。

alexsenichev picture alexsenichev 于 2018-11-26

有人可以为我确认这不是生产中的问题吗？

serendipity1004 picture serendipity1004 于 2018-11-30

有人可以为我确认这不是生产中的问题吗？

在生产模式下可以，在我将ENV更改为生产后，一切正常

alexsenichev picture alexsenichev 于 2018-11-30
👍3

我在开发和生产中都有这个。 页面是否处于非活动状态都没关系，等等。我可以重新加载，但无法正常工作。 在开发中，服务器控制台
> Building page: /contact
WAIT Compling...
success client complied in 462ms
但是页面永远不会在客户端中呈现。 同时，在客户端控制台上：
[HMR] bundle rebuilding消息，然后服务器控制台将给出：
Disposing of inactive page(s): /, /contact

如果我在浏览器中输入mysite.com/contact，它将加载正常。
我已经试过了工作围绕next.config.js的maxInactiveAge和pagesBufferLength无济于事。

[希望就像许多人所说的那样只是在开发中]

编辑：我确实有一个组件中的import 'node-mod/dist/theme.css 。 我将该导入移动到_app.js ，并且Link正在工作。

dmayo2 picture dmayo2 于 2018-11-30
👍15 🎉2 😄2

这里同样的问题，路由在配置后无法在开发模式下完成。 真烦人。

roytsang picture roytsang 于 2018-12-04

@roytsang而不是说“相同的问题”，请在问题上使用👍。 在👍上排序时，最终不会考虑您的手册+1

timneutkens picture timneutkens 于 2018-12-04
👍27

我有同样的问题。 从今天开始，直到我开始使用_app中的next / head来应用标题和收藏图标。

Atmospheres picture Atmospheres 于 2018-12-13
👍5

@Atmospheres您是否尝试过@malimccalla解决方法？ 这不是一个完整的解决方案，但对我来说是一种解决方法。

scrumptiousdev picture scrumptiousdev 于 2018-12-14

我还没有解决这个问题，但是我很快就会解决。 我只是认为，有关问题何时出现的更多信息可能对寻求修复的人员有用。

更新：今天早上我一直在做一些测试，这就是我遇到的问题。

问题是从昨天开始的，我实施的唯一新事物是下一任负责人。 我意识到我将用于加载样式的_document中的head更改为Head。 我还将Head添加到_app.js来设置标题和收藏夹图标。 在_app.js中删除Head并不能解决此问题。 同时删除_app和_document中的Head也不能解决问题。 我尝试了最后一件事，我将_document中的Head恢复为head，然后将_app中的Head设置为标题和收藏夹图标，现在问题解决了。

如果问题出于任何原因再次出现，我将在此处再次更新。 我希望此信息可能有助于解决问题。

更新2：问题仍然存在，尽管出现的频率不及发生的频率。 我已经注意到，当确实发生这种情况时，我看到为该页面加载js的script标签是重复的。 例如，第一次加载页面“ x”时，它会添加

是否可以让我们知道问题出在哪里，如果我们现在无法升级，我们如何能够解决该问题？ 例如，它与CSS加载有关吗？ 它可以在配置中更改吗？

jon64digital picture jon64digital 于 2019-01-25
👍1

@ jon64digital我在＃5994中写了此问题的完整文章，您可以通过延长处置时间来解决此问题。

timneutkens picture timneutkens 于 2019-01-25
❤6

@timneutkens我正在使用8.1.1-canary.24 ，但该错误仍然存​​在。 任何想法？

编辑：发现发生了什么事。 不知道为什么...
我有一个index.tsx和index.less文件。 我在netxt.config.js文件中使用了cssModules（使用withLess）。 当加载/subpage并具有引用/ （这将导入这样的样式： import css from './index.less'; ），然后将动态加载脚本（ http://localhost:3000/_next/static/development/pages/index.js ），但未呈现。 实际上，URL根本没有改变，就像卡住了...删除较少的文件导入解决了该问题。

吗

Edit2：似乎我遇到了https://github.com/zeit/next-plugins/issues/282

AmazingTurtle picture AmazingTurtle 于 2019-05-06
😕1

我仍然在8.1.0上也发生这种情况。 我将尝试重制并打开新一期

malimccalla picture malimccalla 于 2019-05-13

对我来说，它也不导航到/ about路线每次都给出404！ 不确定路由问题！？ ：/

package.json依赖项：

"dependencies": { "cross-env": "^5.2.0", "express": "^4.17.0", "next": "^8.1.0", "react": "^16.8.6", "react-dom": "^16.8.6" }

jsbimra picture jsbimra 于 2019-05-17

@jsbimra请始终提供完整的复制品。 看“为我而生”是不可能的

timneutkens picture timneutkens 于 2019-05-18

@jsbimra请_always_提供完整的复制品。 看“为我而生”是不可能的

发现了一个问题，这与在next.js的页面文件夹下创建页面的步骤丢失有关，抱歉打扰@timneutkens

jsbimra picture jsbimra 于 2019-05-18

有什么解决办法吗？ 在生产中也会发生这种情况吗？ 因为在开发人员中发生了这个错误，该错误来自2018年和2019年5月22日，但该错误仍未得到修复，如果在生产中未发生此错误，我并不担心，但是如果发生了，那么这是一个很大的问题...

Solitaryo picture Solitaryo 于 2019-05-22

该错误来自2018年和2019年5月22日，但尚未修复

基于@malimccalla提供的复制，已修复。

如果在生产中不会发生这种情况，我不会担心

没有。

请注意，此评论不会解决您的问题。 正如之前多次说过的：

请始终提供完整的复制品。 看“为我而生”是不可能的

timneutkens picture timneutkens 于 2019-05-25

我在最新版本（8.1.0）中有相同的问题。

mariagnoriegag picture mariagnoriegag 于 2019-05-30
👍2

我在最新版本（8.1.0）中有相同的问题。

我现在已经回复了3次，并给出了完全相同的消息。 请提供复制品。

请注意，此评论不会解决您的问题。 正如之前多次说过的：

请始终提供完整的复制品。 看“为我而生”是不可能的

timneutkens picture timneutkens 于 2019-05-30
👍3

我对无法访问~ / index.tsx的问题感到困扰。
但是我终于找到了原因！

我使用了一个名为react-activity的库，但是同时我需要导入CSS。

当我在不同的地方两次读取相同的CSS时，似乎无法迁移。
通过读取_app.tsx ，我能够成功迁移。

pochi-sato picture pochi-sato 于 2019-06-03

@timneutkens好的，可以，我可以增加处理时间，但是第一次启动服务器的情况如何？ 我将无法以编程方式导航到这些页面，因为它们尚未构建。 🤔

dydokamil picture dydokamil 于 2019-06-05

我现在已经用相同的消息回复了大约4次。 请提供复制品。

请注意，此评论不会解决您的问题。 正如之前多次说过的：

请始终提供完整的复制品。 看“为我而生”是不可能的

为了回答特定问题，页面是按需构建的，并且该系统运行良好。 我假设您的配置中有一些东西使webpack不会在完成构建时触发文件。 但是很难/不可能说，因为没有复制。

还要注意，如前所述，特定问题已得到解决，并且增加超时并不能解决您遇到的特定问题。 因此，为什么我一直要求复制reproduction。

我们非常乐意调查并花时间在上面。

timneutkens picture timneutkens 于 2019-06-05

我昨天创建了一个新项目，效果很好。 我的项目必须有一些特定的内容才能使它不起作用。 我将尝试在今天晚些时候逐步将其分解，看看问题何时消失。

dydokamil picture dydokamil 于 2019-06-06

如果您可以可靠地复制它，我很乐意看一下。

timneutkens picture timneutkens 于 2019-06-06

好消息是我能够查明错误。 坏消息是，我项目的问题与其他人在此主题中所报告的没有什么不同。

因此，如果问题出在CSS和处置限制之内，并且据说已经解决了，那我一定做错了。 这是您放置这些物品的地方吗？

module.exports = withCSS({ onDemandEntries: { maxInactiveAge: 1000 * 60 * 60 } })

复制： https :

dydokamil picture dydokamil 于 2019-06-06
👍2

@dydokamil
已知的错误： https :
您可以“解决”它，导入一个空的CSS文件。

flytaly picture flytaly 于 2019-06-06
👍1

我可以使它在开发，生产和静态导出模式之间可靠地重现，而onDemandEntries或空的CSS文件变通办法都没有帮助。

解决此问题的唯一方法是从博客文章页面上的“正文”组件中删除import 'highlight.js/styles/color-brewer.css'; 。

指向博客帖子页面的任何<Link>实例都将无法加载，但单击<Link>仍会将http://localhost:3000/_next/static/development/pages/post.js放到页面上。 注释掉CSS导入，到博客帖子的<Link> s工作性能。 取消注释，所有<Link>无法加载博客文章。

击中任何这些博客文章页面路由都可以直接正常工作，该错误仅与客户端有关基于路由。 从版本6升级到版本8后，就会发生这种情况。

我最初是用@zeit/next-css但是在交换@zeit/next-sass并导入.scss文件后，我可以用相同的方式复制此问题。 现在，我只是使用styled-components drop @zeit/next-css来加载这些样式。 在查看https://www.npmjs.com/package/@zeit/next -css和https://www.npmjs.com/package/@zeit/next -sass之后，似乎这些用法示例将中断 🤔

BlakePetersen picture BlakePetersen 于 2019-06-17
👍13

您能否将复制存储库添加到https://github.com/zeit/next-plugins/issues/282

您所描述的听起来完全像这个问题。

timneutkens picture timneutkens 于 2019-06-19

我可以使它在开发，生产和静态导出模式之间可靠地重现，而onDemandEntries或空的CSS文件变通办法都没有帮助。

解决此问题的唯一方法是从博客文章页面上的“正文”组件中删除import 'highlight.js/styles/color-brewer.css'; 。

指向博客帖子页面的任何<Link>实例都将无法加载，但单击<Link>仍会将http://localhost:3000/_next/static/development/pages/post.js放到页面上。 注释掉CSS导入，到博客帖子的<Link> s工作性能。 取消注释，所有<Link>无法加载博客文章。

直接打那些博客文章页面路由都可以正常工作，该错误仅与基于客户端的路由有关。 从版本6升级到版本8后，就会发生这种情况。

我最初是用@zeit/next-css但是在交换@zeit/next-sass并导入.scss文件后，我可以用相同的方式复制此问题。 现在，我只是使用styled-components drop @zeit/next-css来加载这些样式。 在查看https://www.npmjs.com/package/@zeit/next -css和https://www.npmjs.com/package/@zeit/next -sass之后，这些用法示例似乎会中断🤔

添加next / css包后，我也可以确认这也是我所经历的。

kevinvugts picture kevinvugts 于 2020-01-07

在开发过程中，我也遇到了同样的事情（生产工作按预期进行），问题是当我们链接到导入sass文件的页面（或内部具有组件）时。

我的next.config.js文件：

const withSass = require('@zeit/next-sass');

const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
});

require('dotenv').config();

module.exports = withBundleAnalyzer(
  withSass({
    distDir: '../dist',
    env: {...},
  }),
);

因此，深入的组件之一将具有此导入：

// MIGRATE: PriceDetail to styled components
import './PriceDetail.scss';

当我评论导入时，链接开始工作。 因此， withSass插件似乎是一个问题。

acabreragnz picture acabreragnz 于 2020-05-03

我有类似的问题，但不相同。 不幸的是我遇到了同样的错误
也在生产中。 但是由于某些原因，链接有时会起作用。

kodcuserkan picture kodcuserkan 于 2020-05-06

我在下一个9.4中遇到了相同的问题
我昨天在项目中添加了CodeMirror
import "codemirror/lib/codemirror.css"

我有一些类似于pages / page2.js的东西，它做了一些事情，然后在结尾处调用router.replace("/") ，它突然停止做任何事情。
在调试器中运行router.replace("/")表示一个承诺，它永远不会解决或击中catch或finally块。

另外可能值得注意的是，我的next.config.js中确实包含next-css-我将尝试将其删除，以查看是否有影响。

看起来这里可能有热修复程序？ =）

elsigh picture elsigh 于 2020-05-13

啊哈，这对我来说已经解决了-我显然也必须将导入内容也移到$$$ _app.js shell文件中。

elsigh picture elsigh 于 2020-05-13
此页面是否有帮助？
0 / 5 - 0 等级

相关问题

pie6k picture pie6k  ·  3评论
rauchg picture rauchg  ·  3评论
havefive picture havefive  ·  3评论
knipferrc picture knipferrc  ·  3评论
olifante picture olifante  ·  3评论