Problem: You will get Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
Solution: Downgrade to zustand@4 and replace zustand/shallow
with zustand/react/shallow
For other dependencies, it works as well
I use pnpm workspace, and here are my dependencies on my main project.
"dependencies": {
"@auth/prisma-adapter": "^2.5.2",
"@aws-sdk/client-s3": "^3.658.0",
"@aws-sdk/lib-storage": "^3.658.0",
"@aws-sdk/s3-request-presigner": "^3.658.0",
"@dnd-kit/core": "^6.1.0",
"@dnd-kit/modifiers": "^7.0.0",
"@dnd-kit/sortable": "^8.0.0",
"@dnd-kit/utilities": "^3.2.2",
"@ducanh2912/next-pwa": "^10.2.9",
"@emotion/css": "^11.13.0",
"@emotion/react": "^11.13.3",
"@juggle/resize-observer": "^3.4.0",
"@million/lint": "1.0.0-rc.84",
"@nexel/cosmos": "workspace:*",
"@nexel/nextjs": "workspace:*",
"@nexel/prisma": "workspace:*",
"@next/third-parties": "^14.2.13",
"@primer/react": "^36.27.0",
"@prisma/client": "^5.20.0",
"@prisma/extension-accelerate": "^1.1.0",
"@radix-ui/react-accordion": "^1.2.0",
"@radix-ui/react-avatar": "^1.1.0",
"@radix-ui/react-dialog": "^1.1.1",
"@radix-ui/react-dropdown-menu": "^2.1.1",
"@radix-ui/react-icons": "^1.3.0",
"@radix-ui/react-label": "^2.1.0",
"@radix-ui/react-menubar": "^1.1.1",
"@radix-ui/react-popover": "^1.1.1",
"@radix-ui/react-select": "^2.1.1",
"@radix-ui/react-slot": "^1.1.0",
"@radix-ui/react-switch": "^1.1.0",
"@radix-ui/react-tabs": "^1.1.0",
"@react-three/csg": "^3.2.0",
"@react-three/drei": "^9.114.0",
"@react-three/fiber": "^8.17.8",
"@react-three/flex": "^1.0.1",
"@react-three/postprocessing": "^2.16.2",
"@react-three/rapier": "^1.4.0",
"@scalar/nextjs-api-reference": "^0.4.89",
"@sentry/nextjs": "^8.32.0",
"@t3-oss/env-nextjs": "^0.11.1",
"@tanstack/react-query": "4.36.1",
"@trpc/client": "^10.45.2",
"@trpc/react-query": "^10.45.2",
"@trpc/server": "^10.45.2",
"bcryptjs": "^2.4.3",
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.1",
"cmdk": "^1.0.0",
"component-material": "^1.0.7",
"cookie": "^0.6.0",
"detect-gpu": "^5.0.49",
"dotenv": "^16.4.5",
"dotenv-cli": "^7.4.2",
"framer-motion": "^11.7.0",
"framer-motion-3d": "^11.7.0",
"global": "^4.4.0",
"glsl-constants": "^2.0.1",
"glsl-curl-noise2": "^0.0.4",
"glsl-film-grain": "^1.0.4",
"glsl-lut": "^1.1.3",
"glsl-map": "^1.0.1",
"glsl-noise": "^0.0.0",
"glsl-noise-simplex": "^0.0.2",
"glsl-random": "^0.0.5",
"glsl-scale-linear": "^1.0.0",
"glsl-scale-log": "^1.0.0",
"glsl-transpose": "^1.0.0",
"glsl-voronoi-noise": "^1.2.2",
"glsl-waves": "^0.0.2",
"glsl-worley": "^1.0.2",
"glslify": "^7.1.1",
"graphql": "^16.9.0",
"graphql-request": "^7.1.0",
"ioredis": "^5.4.1",
"isomorphic-dompurify": "^2.15.0",
"js-cookie": "^3.0.5",
"lamina": "^1.1.23",
"lodash-es": "^4.17.21",
"lodash.throttle": "^4.1.1",
"lucide-react": "^0.446.0",
"maath": "^0.10.8",
"material-composer": "^0.2.6",
"material-composer-r3f": "^0.2.5",
"million": "^3.1.11",
"next": "14.2.13",
"next-auth": "^4.24.7",
"next-axiom": "^1.5.1",
"next-share": "^0.27.0",
"nodemailer": "^6.9.15",
"nprogress": "^0.2.0",
"path-to-regexp": "^8.1.0",
"postprocessing": "^6.36.2",
"re-resizable": "^6.10.0",
"react": "18.3.1",
"react-day-picker": "^9.1.2",
"react-dom": "18.3.1",
"react-hook-form": "^7.53.0",
"react-icons": "^5.3.0",
"react-intersection-observer": "^9.13.1",
"react-rnd": "^10.4.13",
"react-syntax-highlighter": "^15.5.0",
"react-toastify": "^10.0.5",
"sharp": "^0.33.5",
"stripe": "^16.12.0",
"superjson": "^2.2.1",
"tailwind-merge": "^2.5.2",
"tailwindcss-animate": "^1.0.7",
"three": "^0.168.0",
"three-custom-shader-material": "^6.0.3",
"three-stdlib": "^2.33.0",
"use-sync-external-store": "^1.2.2",
"uuidv7": "^1.0.2",
"vaul": "^0.9.6",
"ws": "^8.18.0",
"zod": "^3.23.8",
"zustand": "4.5.5"
},
"devDependencies": {
"@eslint/js": "^9.11.1",
"@next/bundle-analyzer": "^14.2.13",
"@pandacss/dev": "^0.46.1",
"@types/bcryptjs": "^2.4.6",
"@types/cookie": "^0.6.0",
"@types/envinfo": "^7.8.4",
"@types/js-cookie": "^3.0.6",
"@types/lodash-es": "^4.17.12",
"@types/lodash.throttle": "^4.1.9",
"@types/multer": "^1.4.12",
"@types/node": "^22.7.0",
"@types/nprogress": "^0.2.3",
"@types/react": "^18.3.9",
"@types/react-syntax-highlighter": "^15.5.13",
"@types/three": "^0.168.0",
"@types/ws": "^8.5.12",
"autoprefixer": "^10.4.20",
"eslint": "^9.11.1",
"eslint-plugin-react": "^7.36.1",
"file-loader": "^6.2.0",
"glob": "^11.0.0",
"globals": "^15.9.0",
"glslify-import-loader": "^0.1.2",
"glslify-loader": "^2.0.0",
"lygia": "^1.1.3",
"next-compose-plugins": "^2.2.1",
"postcss": "^8.4.47",
"postcss-nesting": "^13.0.0",
"prettier": "^3.3.3",
"prettier-plugin-tailwindcss": "^0.6.8",
"raw-loader": "^4.0.2",
"rimraf": "^6.0.1",
"tailwindcss": "^3.4.13",
"typescript": "^5.6.2",
"typescript-eslint": "^8.7.0",
"url-loader": "^4.1.1"
}
Pay now to fund the work behind this issue.
Get updates on progress being made.
Maintainer is rewarded once the issue is completed.
You're funding impactful open source efforts
You want to contribute to this effort
You want to get funding like this too