制作了一个Next JS应用程序并显示此错误应用程序错误：发生客户端异常（有关更多信息，请参阅浏览器控制台）

Question

我刚刚使用

npx create-next-app@latest

创建了一个 Next JS 项目，在启动应用程序时使用这些设置：

√ Would you like to use TypeScript? ... No 
√ Would you like to use ESLint? ...  Yes
√ Would you like to use Tailwind CSS? ...  Yes
√ Would you like to use `src/` directory? ... No 
√ Would you like to use App Router? (recommended) ...  Yes
√ Would you like to customize the default import alias (@/*)? ... No 

当我使用

npm run dev

启动应用程序时，页面上出现此错误：

应用程序错误：发生客户端异常（有关更多信息，请参阅浏览器控制台）。

您可以看到页面内容一秒钟，然后页面会变成空白并显示此消息

我没有更改项目中的任何内容，我只是构建了应用程序，运行了应用程序，然后就发生了这种情况。

这些是控制台错误：

Uncaught Error: Invariant: Missing ActionQueueContext
    at useReducerWithReduxDevtoolsImpl (use-reducer-with-devtools.js?9e730:95:15)
    at Router (app-router.js?6e300:198:100)
    at renderWithHooks (react-dom.development.js:9745:28)
    at mountIndeterminateComponent (react-dom.development.js:14632:25)
    at beginWork$1 (react-dom.development.js:15936:32)
    at HTMLUnknownElement.callCallback (react-dom.development.js:17629:30)
    at Object.invokeGuardedCallbackImpl (react-dom.development.js:17667:30)
    at invokeGuardedCallback (react-dom.development.js:17729:39)
    at beginWork (react-dom.development.js:22805:21)
    at performUnitOfWork (react-dom.development.js:21852:24)
    at workLoopConcurrent (react-dom.development.js:21840:17)
    at renderRootConcurrent (react-dom.development.js:21808:25)
    at performConcurrentWorkOnRoot (react-dom.development.js:20841:48)
    at workLoop (scheduler.development.js:200:48)
    at flushWork (scheduler.development.js:178:28)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:416:35)

---

app-index.js:35 Warning: An error occurred during hydration. The server HTML was replaced with client content in <#document>.

---

Uncaught Error: Invariant: Missing ActionQueueContext
    at useReducerWithReduxDevtoolsImpl (use-reducer-with-devtools.js?9e730:95:15)
    at Router (app-router.js?6e300:198:100)
    at renderWithHooks (react-dom.development.js:9745:28)
    at mountIndeterminateComponent (react-dom.development.js:14632:25)
    at beginWork$1 (react-dom.development.js:15936:32)
    at HTMLUnknownElement.callCallback (react-dom.development.js:17629:30)
    at Object.invokeGuardedCallbackImpl (react-dom.development.js:17667:30)
    at invokeGuardedCallback (react-dom.development.js:17729:39)
    at beginWork (react-dom.development.js:22805:21)
    at performUnitOfWork (react-dom.development.js:21852:24)
    at workLoopSync (react-dom.development.js:21617:17)
    at renderRootSync (react-dom.development.js:21584:21)
    at recoverFromConcurrentError (react-dom.development.js:20917:30)
    at performConcurrentWorkOnRoot (react-dom.development.js:20871:46)
    at workLoop (scheduler.development.js:200:48)
    at flushWork (scheduler.development.js:178:28)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:416:35)

---

app-index.js:35 The above error occurred in the <Router> component:

    at Router (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js?6e300:181:11)
    at ErrorBoundaryHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js?61f80:114:9)
    at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js?61f80:161:11)
    at AppRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js?6e300:536:13)
    at ServerRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:129:11)
    at RSCComponent
    at Root (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:145:11)

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundaryHandler.

---

Uncaught Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.
    at updateHostRoot (react-dom.development.js:14381:71)
    at beginWork$1 (react-dom.development.js:15958:28)
    at beginWork (react-dom.development.js:22789:28)
    at performUnitOfWork (react-dom.development.js:21852:24)
    at workLoopSync (react-dom.development.js:21617:17)
    at renderRootSync (react-dom.development.js:21584:21)
    at recoverFromConcurrentError (react-dom.development.js:20917:30)
    at performConcurrentWorkOnRoot (react-dom.development.js:20871:46)
    at workLoop (scheduler.development.js:200:48)
    at flushWork (scheduler.development.js:178:28)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:416:35) 

---

Failed to load resource: the server responded with a status of 404 (Not Found)

---

我尝试过的：

• 做了一个新项目，但出现了同样的问题。
• 关闭Google Chrome和VSCode再打开，问题依旧。
• 在 YT 上查找了这个问题，他们建议更新 Google Chrome，但我已经在使用最新版本了
• 重新启动电脑，问题仍然存在。

Answer 1

我离开了 20 分钟，现在可以了......