React Error 321 when using hamburger-react

[languageleague]

I'm getting this error from Vercel, which seems to come from this package:

Any ideas why this could be?

[luukdv]

Hi @languageleague, can you provide a link with a minimal reproducible example or snippet? I'm using it in multiple Next projects and haven't run into issues so far.

[languageleague]

I'm actually not quite able to replicate it, but i'll post my package.json and where I use the code here:

package.json

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "test": "jest --watch"
  },
  "dependencies": {
    "@babel/preset-typescript": "^7.18.6",
    "@fortawesome/fontawesome-svg-core": "^6.2.0",
    "@fortawesome/free-brands-svg-icons": "^6.2.0",
    "@fortawesome/free-regular-svg-icons": "^6.2.0",
    "@fortawesome/free-solid-svg-icons": "^6.2.0",
    "@fortawesome/react-fontawesome": "^0.2.0",
    "@next/bundle-analyzer": "^12.3.1",
    "@sendgrid/mail": "^7.7.0",
    "@tailwindcss/nesting": "^0.0.0-insiders.565cd3e",
    "array-shuffle": "^3.0.0",
    "axios": "^1.1.2",
    "crypto-js": "^4.1.1",
    "dotenv": "^16.0.3",
    "email-validator": "^2.0.4",
    "firebase": "^9.11.0",
    "fp-ts": "^2.12.3",
    "framer-motion": "^7.5.3",
    "google-spreadsheet": "^3.3.0",
    "gray-matter": "^4.0.3",
    "hamburger-react": "^2.5.0",
    "http-status-codes": "^2.2.0",
    "io-ts": "^2.2.19",
    "jest-cli": "^29.1.2",
    "markdown-it": "^13.0.1",
    "next": "^12.3.1",
    "postcss-import": "^15.0.0",
    "rate-limiter-flexible": "^2.3.11",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-html-props": "^1.0.33",
    "react-markdown": "^8.0.3",
    "ts-node": "^10.9.1"
  },
  "devDependencies": {
    "@tailwindcss/aspect-ratio": "^0.4.2",
    "@tailwindcss/typography": "^0.5.7",
    "@testing-library/dom": "^8.19.0",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^14.4.3",
    "@types/crypto-js": "^4.1.1",
    "@types/google-spreadsheet": "^3.3.0",
    "@types/jest": "^29.1.2",
    "@types/markdown-it": "^12.2.3",
    "@types/react": "18.0.21",
    "@types/react-scroll": "^1.8.4",
    "autoprefixer": "^10.4.12",
    "babel-jest": "^29.1.2",
    "eslint": "8.25.0",
    "eslint-config-next": "^13.0.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^29.1.2",
    "postcss": "^8.4.17",
    "react-test-renderer": "^18.2.0",
    "start-server-and-test": "^1.14.0",
    "tailwindcss": "^3.1.8",
    "ts-jest": "^29.0.3",
    "typescript": "^4.8.4"
  }
}

My code:

import { useContext } from 'react';
import { Spiral } from 'hamburger-react';
import { NavbarContext } from 'context/NavbarContext';

interface MobileHeaderHamburgerProps {}

export const MobileHeaderHamburger: React.FC<
    MobileHeaderHamburgerProps
> = () => {
    const navCtx = useContext(NavbarContext);

    return (
        <div className="relative z-30">
            <Spiral onToggle={(t) => navCtx.setShow(t)} />
        </div>
    );
};

[luukdv]

Based on the extremely small snippet above I'm not able to say anything about where in your codebase the problem is present. Let me know if you're able to provide a minimal reproducible example on CodeSandbox for example, then I can take a look!