使用React/Next.js进行简单的网站项目。使用以下代码在导航组件中工作:
.
'use client';
import { useState } from 'react';
// Imports
import { FaBars } from 'react-icons/fa'
import { FaDiscord } from 'react-icons/fa'
// NavBar Component
export function NavBar() {
const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
return (
<nav className="navbar flex flex-row justify-between">
<button
type="button"
className="text-lg font-medium text-center p-6 hover:yellow-hover"
onClick={() => setMobileMenuOpen(true)}
>
<FaBars />
</button>
<a href="#"
className="text-lg font-bold text-center p-6 hover:yellow-hover">
〔 sTGS 〕
</a>
<a href="#"
className="text-lg font-medium text-center p-6 hover:yellow-hover">
<FaDiscord />
</a>
</nav>
);
}
字符串
.
页面出现以下错误:
.
Unhandled Runtime Error
TypeError: __webpack_require__.n is not a function. (In '__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__)', '__webpack_require__.n' is undefined)
Call Stack
eval
[native code]
(app-pages-browser)/./components/navbar.jsx
/_next/static/chunks/app/page.js (28:5)
<unknown>
file:///Users/d369/Projects/websites/stgs/.next/static/chunks/webpack.js (704:35)
__webpack_require__
/_next/static/chunks/webpack.js (37:37)
型
.
Screenshot of Error
.
尝试制作一个可以在小屏幕上使用的移动的菜单。按钮/图标在我的React/Next.js项目中的NavBar组件中,它需要{useState}和“use client”才能使组件具有交互性。但是,当我添加其中任何一个时,我都会得到所述的错误。我看了文档YouTube和Stack上的找不到任何原因为什么它这样做。
我到底该怎么弥补?
1条答案
按热度按时间wr98u20j1#
所以这一个是愤怒的。我也遇到了同样的问题,昨天才发现。我说令人愤怒是因为它并不总是发生。
首先,我能够在测试项目中用您的代码复制这个运行时错误。我发现这个问题不仅发生在你的组件中,而且发生在我自己的不相关的测试组件中。
第二,我注意到执行
字符串
没有在你的组件和我的测试组件中重现运行时错误。
接下来,我删除了您的组件,并在开发模式下运行
型
它突然工作了,没有运行时错误。所以我添加了你的组件和viola,我们的组件都返回了运行时错误。
接下来,我清除了浏览器缓存,在Safari中的“开发”选项卡中或在MSFT Edge浏览到'edge://settings/clearbrowserdata'中的“空缓存”
在用两个浏览器进行了多次重启和测试之后,我无法重现运行时错误。然而,当我添加第三个组件(基本上是我的测试组件的副本)时,返回了相同的未经处理的运行时错误(仅在Safari中)。在本例中,清除该高速缓存会清 debugging 误(独立缓存并不奇怪)。
我不会称之为“解决方案”本身,但我希望其中的一些信息可能会引发一些更有才华的人的洞察力。至少这是一个可能的工作。