MaxListeners Exceeded when combining web3UIkit (Connectbutton) and NextJS/Link #1975

deAgora · 2022-08-22T13:56:09Z

deAgora
Aug 22, 2022

Hi all!

I am continuously running into a MaxListeners Exceeded issue in my project and I cannot find the solution to it. The problem presents itself when browsing between pages in the navBar a few times: after a couple of clicks the console notifies the Maxlisteners issue:

Verbatim Error in console:
MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 accountChanged listeners added. Use emitter.setMaxListeners() to increase limit.

I find this weird as the coding does not include anything special and I cannot find the rootcause of this. After scouring StackOverflow and the like I have seen some people having similar issues but no solution goes further than setting the Maxlisteners. The reason I am reluctant to go that way is that people have compared this 'fix' with sweeping dirt under the rug and is therefore not the ideal solution.

I have created a seperate barebones project on Github that only has the minimum required packages on it to try and isolate the problem. It seems as though the web3UIKit, React, Moralis and/or Next don't play well with eachother however I lack the expertise to determine this 100%. The notification mentions 'accountChanged' which makes me think the connectbutton from web3UIkit might be the culprit. On the other hand the listeners that are added seem to mostly refer to node modules/react-dom.

My question(s) to you is: have you ever seen this error, can you find the cause of this problem and/or do you know of a solution to counteract this problem all together.

I will share the code below and a GitHub clone for your convenience. I will be forever in your debt if you can help me.

github clone: https://github.com/deAgora/maxlisteners.git

_app.js

import { MoralisProvider } from "react-moralis";
import "../styles/globals.css";

function MyApp({ Component, pageProps }) {
  return (
    <MoralisProvider initializeOnMount={false}>
      <Component {...pageProps} />
    </MoralisProvider>
  );
}

export default MyApp;

Index.js

import Head from "next/head";
import Header from "../components/Header";
import Navbar from "../components/Navbar";
import styles from "../styles/Home.module.css";

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <Header></Header>
      <Navbar></Navbar>
      <div>This page is an example to illustrate the maxlisteners issue</div>
    </div>
  );
}

Page1.js

import Head from "next/head";
import Header from "../components/Header";
import Navbar from "../components/Navbar";
import styles from "../styles/Home.module.css";

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <Header></Header>
      <Navbar></Navbar>
      <div>
        Page 1: This page is an example to illustrate the maxlisteners issue
      </div>
    </div>
  );
}

Component Header.js

import { ConnectButton } from "@web3uikit/web3";

export default function Header() {
  return (
    <div className="p-5 border-b-2 flex flex-row bg-slate-400">
      <h1 className="py-4 px-4 font-blog text-3xl">Maxlisteners Example</h1>
      <div className="ml-auto py-2 px-4">
        <ConnectButton moralisAuth={false}></ConnectButton>
      </div>
    </div>
  );
}

Component: Navbar.js

import Link from "next/link";

export default function Navbar() {
  return (
    <div className="bg-slate-400">
      <ul className="grid grid-cols-3 place-items-center py-2 border-b-2 f">
        <li>
          <Link href="/">
            <a>Home</a>
          </Link>
        </li>
        <li>
          <Link href="/page1">
            <a>Page1</a>
          </Link>
        </li>
      </ul>
    </div>
  );
}

Package.json

{
  "name": "maxlisteners",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@web3uikit/core": "^0.1.5",
    "@web3uikit/icons": "^0.1.5",
    "@web3uikit/web3": "^0.1.5",
    "magic-sdk": "^9.0.0",
    "moralis": "^2.0.3",
    "next": "12.2.5",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-moralis": "^1.4.1"
  },
  "devDependencies": {
    "eslint": "8.22.0",
    "eslint-config-next": "12.2.5"
  }
}

deAgora · 2022-08-24T12:17:24Z

deAgora
Aug 24, 2022
Author

Update:

So after banging my head against the wall repeatedly trying to fix this by all means necessary I ultimately had to redefine the saying all together.

After hours/days of huffing and puffing I figured I only had one option left: reverse engineer by process of elimination. So, I have recreated the project however this time I chose to build the front end in React-proper instead of the Next-framework. Also, I chose to use a different router entirely (I used React-Router-Dom instead of the Next/Link router). To provide some perspective, my steps so far:

build front end using Next-JS and Next/Link >> results in MaxListenersExceeded error when swithing pages using Next/Link.
build front end using Next-JS and React-Dom-Router >> doesn't work because NextJS is Server Side Rendered and React-Dom-Router doesn't really work with that.
build front end using React-Proper and React-Dom-Router >> works like a charm > no error in sight after 50+ (partial) re-renders.

Now, although I have little coding experience I do think I can at least point my finger in the right direction >> IMHO the culprit was the Next/Link router (which in the NextJS framework seems to be the go-to router). After some reading into how the Next/Link router works it seems as tho it really likes to re-render all components every chance it gets. Keeping that in mind, I get a vague feeling that at every re-render the ConnectButton from the Web3UIKit (and/or in combination with React-DOM) keeps adding a listener at every step. If that holds true, the error should come up at every 11 scrolls through the pages ( and that is what the 'evidence' shows ).

In contrast, the React-Router-DOM allows for nesting and dynamic routing which, in turn, allows us to choose which components to re-render and which it should not. This way we don't add any listeners at every step of the way.

Being fully aware that I am Bronze League at best I just want to share my findings as I need someone that actually knows what they are talking about to verify what I am saying is even remotely possible OR true. That being said: sharing is caring.

Disclaimer: this is the first place I came to share my thoughts as many more issues may arise from the current packages I am using so reader beware.

Thanks for reading,

Patrick

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

MaxListeners Exceeded when combining web3UIkit (Connectbutton) and NextJS/Link #1975

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

MaxListeners Exceeded when combining web3UIkit (Connectbutton) and NextJS/Link #1975

Uh oh!

deAgora Aug 22, 2022

Replies: 1 comment

Uh oh!

deAgora Aug 24, 2022 Author

deAgora
Aug 22, 2022

deAgora
Aug 24, 2022
Author