Next.js“使用客户端”和 useState 未处理的运行时错误：TypeError：__webpack_require__.n 不是函数

Question

使用 React/Next.js 构建一个简单的网站项目。使用以下代码在导航组件中工作：

\n

。

\n

\'use client\';\nimport { useState } from \'react\';\n\n// Imports\nimport { FaBars } from \'react-icons/fa\'\nimport { FaDiscord } from \'react-icons/fa\'\n\n// NavBar Component\nexport function NavBar() {\n\n  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)\n\n  return (\n\n    <nav className="navbar flex flex-row justify-between">\n\n      <button\n        type="button"\n        className="text-lg font-medium text-center p-6 hover:yellow-hover"\n        onClick={() => setMobileMenuOpen(true)}\n      >\n      <FaBars />\n      </button>\n      \n      \n\n      <a href="#"\n        className="text-lg font-bold text-center p-6 hover:yellow-hover">\n        \xe3\x80\x94 sTGS \xe3\x80\x95\n      </a>\n      \n      <a href="#"\n        className="text-lg font-medium text-center p-6 hover:yellow-hover">\n        <FaDiscord />\n      </a>\n\n    </nav>\n\n  );\n}\n

\n

。

\n

网页上出现如下错误：

\n

。

\n

Unhandled Runtime Error\nTypeError: __webpack_require__.n is not a function. (In \'__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__)\', \'__webpack_require__.n\' is undefined)\nCall Stack\neval\n\n[native code]\n(app-pages-browser)/./components/navbar.jsx\n\n/_next/static/chunks/app/page.js (28:5)\n<unknown>\n\nfile:///Users/d369/Projects/websites/stgs/.next/static/chunks/webpack.js (704:35)\n__webpack_require__\n\n/_next/static/chunks/webpack.js (37:37)\n

\n

。

\n

错误截图

\n

。

\n

尝试制作一个可在小屏幕上使用的移动菜单。按钮/图标位于 React/Next.js 项目中的 NavBar 组件内，该项目需要 {useState} 和“use client”才能使组件具有交互性。但是，当我添加其中任何一个时，我会收到所述错误。我已经浏览了文档、YouTube 和 Stack 上的内容。没有找到这样做的任何原因。

\n

我到底该如何解决这个问题？

\n

Answer 1

所以这一点是令人气愤的。我也遇到了同样的问题，昨天第一次注意到。我说令人愤怒是因为这种情况并没有持续发生。

首先，我能够在测试项目中使用您的代码复制此运行时错误。我发现问题不仅发生在您的组件中，而且也发生在我自己的不相关的测试组件中。

其次，我注意到执行

npm run build
npm run start

没有在您的组件或我的测试组件中重现运行时错误。

接下来，我删除了您的组件并在开发模式下运行

npm run dev

它突然工作了，没有运行时错误。所以我添加了你的组件和中提琴，我们的两个组件中都返回了运行时错误。

接下来，我清除了浏览器缓存，即 Safari 中“开发”选项卡中的“空缓存”或在 MSFT Edge 中浏览至“edge://settings/clearbrowserdata”

经过多次重新启动并使用两种浏览器进行测试后，我无法重现运行时错误。然而，当我添加第三个组件（本质上是我的测试组件的副本）时，返回了相同的未处理运行时错误（仅在 Safari 中）。在这种情况下，清除缓存可以清除错误（独立缓存所以并不奇怪。）

我不会将其称为“解决方案”本身，但我希望其中一些信息可能会引发更有才华的人的一些见解。至少这是一个可能的解决方法。