使用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上的找不到任何原因为什么它这样做。
我到底该怎么弥补？