NextJS路由切换时多渲染器等报错的解决方法

报错1：意外Fiber弹出警告 #

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)

报错2：读取null属性的类型错误 #

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)

报错3：多渲染器同时渲染上下文提供者警告 #

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"
}
}

解决方案 #

在项目根目录的.env文件中添加以下环境变量，即可解决上述所有报错：

__NEXT_PRIVATE_PREBUNDLED_REACT=next

内容的提问来源于stack exchange，提问作者Rohit Sharma