stack icon indicating copy to clipboard operation
stack copied to clipboard
verified publisher icon stack-auth

transient rendering error when signing out

Open roocell opened this issue 1 year ago • 4 comments

i have a component that displays a list of teams - using the following code

      const user = useUser({ or: 'redirect' });
      if (user)
      {
        const teams = user.useTeams();
        if (teams)
        {
          teams.map(team => {
            memberships.push({id: team.id, imageUrl: null, name: team.displayName});
          });
        }
      }

i get this error in the client console

the error just splashes quickly, then (i suspect) the redirect of the sign-out makes it goto the home page.

IMG_4339

maybe useTeams() should check if teams is null here?

  useTeams(): ServerTeam[] {
    const teams = useAsyncCache(this._serverTeamsCache, [], "useServerTeams()");
    return useMemo(() => {
      return teams.map((t) => this._serverTeamFromJson(t));
    }, [teams]);
  }

https://github.com/stack-auth/stack/blob/b9ebd30d105b7a1ba61f3d96a0907596ef6c4e32/packages/stack/src/lib/stack-app.ts#L1627

chrome console log

Warning: Cannot update a component (`HotReload`) while rendering a different component (`Sidebar`). To locate the bad setState() call inside `Sidebar`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render
    at Sidebar (webpack-internal:///(app-pages-browser)/./app/(platform)/(dashboard)/_components/sidebar.tsx:31:86)
    at div
    at div
    at main
    at div
    at OrganizationIdLayout (Server)
    at InnerLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:243:11)
    at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:74:9)
    at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:82: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:348:11)
    at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:160:11)
    at InnerScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:153:9)
    at ScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:228: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:369:11)
    at div
    at DashboardLayout (Server)
    at InnerLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:243:11)
    at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:74:9)
    at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:82: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 LoadingBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:348:11)
    at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:160:11)
    at InnerScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:153:9)
    at ScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:228: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:369:11)
    at QueryClientProvider (webpack-internal:///(app-pages-browser)/./node_modules/@tanstack/react-query/build/modern/QueryClientProvider.js:27:11)
    at QueryProvider (webpack-internal:///(app-pages-browser)/./components/providers/query-provider.tsx:15:11)
    at StackComponentProvider (webpack-internal:///(app-pages-browser)/./node_modules/@stackframe/stack/dist/esm/providers/component-provider.js:89:22)
    at StackDesignProvider (webpack-internal:///(app-pages-browser)/./node_modules/@stackframe/stack/dist/esm/providers/design-provider.js:29:43)
    at StyledComponentsRegistry (webpack-internal:///(app-pages-browser)/./node_modules/@stackframe/stack/dist/esm/providers/styled-components-registry.js:19:11)
    at StackTheme (webpack-internal:///(app-pages-browser)/./node_modules/@stackframe/stack/dist/esm/providers/theme-provider.js:17:11)
    at StackProviderClient (webpack-internal:///(app-pages-browser)/./node_modules/@stackframe/stack/dist/esm/providers/stack-provider-client.js:23:27)
    at StackProvider (Server)
    at PlatformLayout (Server)
    at InnerLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:243:11)
    at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:74:9)
    at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:82: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:348:11)
    at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:160:11)
    at InnerScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:153:9)
    at ScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:228: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:369:11)
    at body
    at html
    at RootLayout (Server)
    at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:74:9)
    at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:82: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/app/ReactDevOverlay.js:87:9)
    at HotReload (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/app/hot-reloader-client.js:321:11)
    at Router (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:207:11)
    at ErrorBoundaryHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:113:9)
    at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:160:11)
    at AppRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:577:13)
    at ServerRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:112:27)
    at Root (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:117:11)
window.console.error @ app-index.js:33
console.error @ hydration-error-info.js:63
overrideMethod @ console.js:273
printWarning @ react-dom.development.js:94
error @ react-dom.development.js:68
warnAboutRenderPhaseUpdatesInDEV @ react-dom.development.js:26990
scheduleUpdateOnFiber @ react-dom.development.js:24395
dispatchReducerAction @ react-dom.development.js:13001
eval @ hot-reloader-client.js:361
eval @ use-error-handler.js:62
invokeGuardedCallbackImpl @ react-dom.development.js:20614
invokeGuardedCallback @ react-dom.development.js:20689
beginWork @ react-dom.development.js:26949
performUnitOfWork @ react-dom.development.js:25748
workLoopSync @ react-dom.development.js:25464
renderRootSync @ react-dom.development.js:25419
performSyncWorkOnRoot @ react-dom.development.js:24887
flushSyncWorkAcrossRoots_impl @ react-dom.development.js:7758
flushSyncWorkOnAllRoots @ react-dom.development.js:7718
processRootScheduleInMicrotask @ react-dom.development.js:7863
eval @ react-dom.development.js:8034
error (async)
eval @ use-error-handler.js:30
(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/internal/helpers/use-error-handler.js @ main-app.js?v=1719691426430:980
options.factory @ webpack.js?v=1719691426430:715
__webpack_require__ @ webpack.js?v=1719691426430:37
fn @ webpack.js?v=1719691426430:371
eval @ hot-reloader-client.js:20
(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/app/hot-reloader-client.js @ main-app.js?v=1719691426430:463
options.factory @ webpack.js?v=1719691426430:715
__webpack_require__ @ webpack.js?v=1719691426430:37
fn @ webpack.js?v=1719691426430:371
Router @ app-router.js:521
renderWithHooks @ react-dom.development.js:11121
mountIndeterminateComponent @ react-dom.development.js:16869
beginWork$1 @ react-dom.development.js:18458
beginWork @ react-dom.development.js:26927
performUnitOfWork @ react-dom.development.js:25748
workLoopConcurrent @ react-dom.development.js:25734
renderRootConcurrent @ react-dom.development.js:25690
performConcurrentWorkOnRoot @ react-dom.development.js:24504
workLoop @ scheduler.development.js:256
flushWork @ scheduler.development.js:225
performWorkUntilDeadline @ scheduler.development.js:534
Show 35 more frames
Show lessUnderstand this error
stack-app.js:628 Uncaught TypeError: Cannot read properties of null (reading 'map')
    at eval (webpack-internal:///(app-pages-browser)/./node_modules/@stackframe/stack/dist/esm/lib/stack-app.js:628:75)
    at updateMemo (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:12625:19)
    at Object.useMemo (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:13563:16)
    at useMemo (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react/cjs/react.development.js:2537:21)
    at Object.useTeams (webpack-internal:///(app-pages-browser)/./node_modules/@stackframe/stack/dist/esm/lib/stack-app.js:628:62)
    at Sidebar (webpack-internal:///(app-pages-browser)/./app/(platform)/(dashboard)/_components/sidebar.tsx:65:32)
    at renderWithHooks (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:11121:18)
    at updateFunctionComponent (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:16290:20)
    at beginWork$1 (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:18472:16)
    at HTMLUnknownElement.callCallback (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:20565:14)
    at Object.invokeGuardedCallbackImpl (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:20614:16)
    at invokeGuardedCallback (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:20689:29)
    at beginWork (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:26949:7)
    at performUnitOfWork (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:25748:12)
    at workLoopSync (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:25464:5)
    at renderRootSync (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:25419:7)
    at performSyncWorkOnRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:24887:20)
    at flushSyncWorkAcrossRoots_impl (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:7758:13)
    at flushSyncWorkOnAllRoots (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:7718:3)
    at processRootScheduleInMicrotask (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:7863:3)
    at eval (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:8034:7)

roocell avatar Jun 29 '24 20:06 roocell

@roocell so basically we have to check if teams is a null then we have to return an empty array, please currect me if i am wrong?

ghost avatar Jun 30 '24 10:06 ghost

i think it should be if(teams.length>0)

Riteshyadavanshi avatar Jul 01 '24 07:07 Riteshyadavanshi

We will look into this. There are indeed some weird race conditions when signing out.

One note on your code: if you do const user = useUser({ or: 'redirect' }), the user object is always defined, no need to check it. Also const teams = user.useTeams() always return an array, so you also don't need to check if the teams is defined

fomalhautb avatar Jul 01 '24 15:07 fomalhautb

Can I work on this issue?

kfahad5607 avatar Jul 19 '24 17:07 kfahad5607