This is the issue I seeing on the console while navigation from one route to another in next.js
react_devtools_backend_compact.js:13441 Warning: Unexpected Fiber popped.
at Suspense
at ErrorBoundary (webpack-internal:///(app-pages-browser)/./components/ErrorBoundar.jsx:56:9)
at div
at InnerLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:242:11)
at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:73:9)
at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:81:11)
at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:84:11)
at LoadingBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:340:11)
at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:161:11)
at InnerScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:152:9)
at ScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:227:11)
at RenderFromTemplateContext (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/render-from-template-context.js:16:44)
at OuterLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:359:11)
at InnerLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:242:11)
at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:73:9)
at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:81:11)
at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:76:9)
at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:84:11)
at Suspense
at LoadingBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:340:11)
at ErrorBoundaryHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:114:9)
at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:161:11)
at InnerScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:152:9)
at ScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:227:11)
at RenderFromTemplateContext (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/render-from-template-context.js:16:44)
at OuterLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:359:11)
at div
at $f57aed4a881a3485$var$OverlayContainerDOM (webpack-internal:///(app-pages-browser)/./node_modules/@react-aria/overlays/dist/import.mjs:1069:54)
at $f57aed4a881a3485$export$178405afcd8c5eb (webpack-internal:///(app-pages-browser)/./node_modules/@react-aria/overlays/dist/import.mjs:1036:21)
at $f57aed4a881a3485$export$bf688221f59024e5
at $18f2051aff69b9bf$export$a54013f0d02a8f82 (webpack-internal:///(app-pages-browser)/./node_modules/@react-aria/i18n/dist/real-module.mjs:170:19)
at NextUIProvider (webpack-internal:///(app-pages-browser)/./node_modules/@nextui-org/system/dist/chunk-HRMF5D3P.mjs:15:3)
at Providers (webpack-internal:///(app-pages-browser)/./providers.js:10:11)
at body
at html
at SWRConfig (webpack-internal:///(app-pages-browser)/./node_modules/swr/_internal/dist/index.mjs:565:13)
at OrganizationProvider (webpack-internal:///(app-pages-browser)/./node_modules/@clerk/shared/dist/react/index.mjs:74:3)
at ClerkContextProvider (webpack-internal:///(app-pages-browser)/./node_modules/@clerk/clerk-react/dist/esm/contexts/ClerkContextProvider.js:25:11)
at ClerkProviderBase (webpack-internal:///(app-pages-browser)/./node_modules/@clerk/clerk-react/dist/esm/contexts/ClerkProvider.js:25:11)
at Hoc (webpack-internal:///(app-pages-browser)/./node_modules/@clerk/clerk-react/dist/esm/utils/useMaxAllowedInstancesGuard.js:26:5)
at ClerkNextOptionsProvider (webpack-internal:///(app-pages-browser)/./node_modules/@clerk/nextjs/dist/esm/client-boundary/NextOptionsContext.js:16:11)
at ClientClerkProvider (webpack-internal:///(app-pages-browser)/./node_modules/@clerk/nextjs/dist/esm/app-router/client/ClerkProvider.js:23:13)
at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:73:9)
at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:81:11)
at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:76:9)
at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:84:11)
at DevRootNotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/dev-root-not-found-boundary.js:33:11)
at ReactDevOverlay (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:84:9)
at HotReload (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:307:11)
at Router (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:182:11)
at ErrorBoundaryHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:114:9)
at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:161:11)
at AppRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:538:13)
at ServerRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:129:11)
at RSCComponent
at Root (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:145:11)
Another one
Uncaught TypeError: Cannot read properties of null (reading '_pendingVisibility')
at updateOffscreenComponent (react-dom.development.js:15889:50)
at beginWork$1 (react-dom.development.js:18513:16)
at HTMLUnknownElement.callCallback (react-dom.development.js:20498:14)
at Object.invokeGuardedCallbackImpl (react-dom.development.js:20547:16)
at invokeGuardedCallback (react-dom.development.js:20622:29)
at beginWork (react-dom.development.js:26813:7)
at replaySuspendedUnitOfWork (react-dom.development.js:25737:16)
at renderRootConcurrent (react-dom.development.js:25467:17)
at performConcurrentWorkOnRoot (react-dom.development.js:24432:38)
at workLoop (scheduler.development.js:256:34)
at flushWork (scheduler.development.js:225:14)
at MessagePort.performWorkUntilDeadline (scheduler.development.js:534:21)
Another one
react_devtools_backend_compact.js:13441 Warning: Detected multiple renderers concurrently rendering the same context provider. This is currently unsupported.
at $f57aed4a881a3485$export$178405afcd8c5eb (webpack-internal:///(app-pages-browser)/./node_modules/@react-aria/overlays/dist/import.mjs:1036:21)
at $f57aed4a881a3485$export$bf688221f59024e5
at $18f2051aff69b9bf$export$a54013f0d02a8f82 (webpack-internal:///(app-pages-browser)/./node_modules/@react-aria/i18n/dist/real-module.mjs:170:19)
at NextUIProvider (webpack-internal:///(app-pages-browser)/./node_modules/@nextui-org/system/dist/chunk-HRMF5D3P.mjs:15:3)
at Providers (webpack-internal:///(app-pages-browser)/./providers.js:10:11)
at body
at html
at SWRConfig (webpack-internal:///(app-pages-browser)/./node_modules/swr/_internal/dist/index.mjs:565:13)
at OrganizationProvider (webpack-internal:///(app-pages-browser)/./node_modules/@clerk/shared/dist/react/index.mjs:74:3)
at ClerkContextProvider (webpack-internal:///(app-pages-browser)/./node_modules/@clerk/clerk-react/dist/esm/contexts/ClerkContextProvider.js:25:11)
at ClerkProviderBase (webpack-internal:///(app-pages-browser)/./node_modules/@clerk/clerk-react/dist/esm/contexts/ClerkProvider.js:25:11)
at Hoc (webpack-internal:///(app-pages-browser)/./node_modules/@clerk/clerk-react/dist/esm/utils/useMaxAllowedInstancesGuard.js:26:5)
at ClerkNextOptionsProvider (webpack-internal:///(app-pages-browser)/./node_modules/@clerk/nextjs/dist/esm/client-boundary/NextOptionsContext.js:16:11)
at ClientClerkProvider (webpack-internal:///(app-pages-browser)/./node_modules/@clerk/nextjs/dist/esm/app-router/client/ClerkProvider.js:23:13)
at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:73:9)
at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:81:11)
at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:76:9)
at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:84:11)
at DevRootNotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/dev-root-not-found-boundary.js:33:11)
at ReactDevOverlay (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:84:9)
at HotReload (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:307:11)
at Router (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:182:11)
at ErrorBoundaryHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:114:9)
at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:161:11)
at AppRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:538:13)
at ServerRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:129:11)
at RSCComponent
at Root (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:145:11)
Package.json
{
"name": "taskboard", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "prisma generate && next build", "postinstall": "prisma generate", "start": "next start", "lint": "next lint" }, "dependencies": { "@clerk/nextjs": "^4.29.9", "@nextui-org/react": "^2.2.10", "@prisma/client": "^5.11.0", "framer-motion": "^11.0.14", "next": "^14.1.3", "prisma": "^5.11.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-icons": "^5.0.1", "react-linkify": "^1.0.0-alpha", "zod": "^3.22.4" }, "devDependencies": { "autoprefixer": "^10.4.18", "eslint": "^8.57.0", "eslint-config-next": "14.1.3", "postcss": "^8.4.36", "tailwindcss": "^3.4.1" } }
I solved this error by placing this variable inside the .env file
__NEXT_PRIVATE_PREBUNDLED_REACT=next