Next.js "use client" & useState Unhandled Runtime Error: TypeError: __webpack_require__.n is not a function

Question

Using React/Next.js for a simple website project. Working within a nav component with the following code:

.

'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>

  );
}

.

Getting the following error on the webpage:

.

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

.

Trying to make a mobile menu that's available on small screens. The button/icon is within my NavBar component in a React/Next.js project, which requires {useState} and "use client" in order for the component to be interactive. However, when I add either of them, I get the stated error. I've gone through the docs, YouTube, and here on Stack. Not finding any reasons why it's doing this.

How on earth do I fix this?

Answer 1

So this one is infuriating. I have been having the same problem, first noticed yesterday. I say infuriating because it is not consistently happening.

First, I was able to replicate this runtime error with your code in a test project. I found the issue occurred not just in your component but also in my own unrelated test component.

Second, I noticed that executing

npm run build
npm run start

did not reproduce the runtime error in your component nor in my test component.

Next, I removed your component and ran in dev mode

npm run dev

which suddenly worked without the runtime error. So I added your component back and viola, the runtime error returned in both our components.

Next, I cleared the browser cache which is "Empty Caches" in Safari in the "Develop" tab or in MSFT Edge browsing to 'edge://settings/clearbrowserdata'

After a number of restarts and tests with both browsers, I was not able to reproduce the runtime error. However, when I added a third component (essential a duplicate of my test component) the same Unhandled Runtime Error returned (in just Safari). In this case, clearing the cache cleared the error (independent caches so not surprising.)

I would not call this a "solution" per se, but I am hoping that some of this information might trigger some insight by someone more talented. At a minimum it is a possible work around.