[Bug]: [Tanstack Start] Uncaught Error: This Suspense boundary received an update before it finished hydrating. This caused the boundary to switch to client rendering. The usual way to fix this is to wrap the original update in startTransition.

[paulm17]

What happened?

Hello. I'm using tanstack start and I'm encountering the issue:

Uncaught Error: This Suspense boundary received an update before it finished hydrating. This caused the boundary to switch to client rendering. The usual way to fix this is to wrap the original update in startTransition.
    at updateDehydratedSuspenseComponent (react-dom.development.js:20741:48)
    at updateSuspenseComponent (react-dom.development.js:20401:16)
    at beginWork (react-dom.development.js:21663:14)
    at beginWork$1 (react-dom.development.js:27465:14)
    at performUnitOfWork (react-dom.development.js:26596:12)
    at workLoopSync (react-dom.development.js:26505:5)
    at renderRootSync (react-dom.development.js:26473:7)
    at performConcurrentWorkOnRoot (react-dom.development.js:25777:74)
    at workLoop (scheduler.development.js:266:34)
    at flushWork (scheduler.development.js:239:14)

I have resolved by making the following amendments:

const handleMediaQuery = React.useCallback(
    (e: MediaQueryListEvent | MediaQueryList) => {
      const resolved = getSystemTheme(e)
      // setResolvedTheme(resolved)

      // if (theme === 'system' && enableSystem && !forcedTheme) {
      //   applyTheme('system')
      // }
      React.startTransition(() => {
        setResolvedTheme(resolved)
        
        if (theme === 'system' && enableSystem && !forcedTheme) {
          applyTheme('system')
        }
      })
    },
    [theme, forcedTheme]
  )

// Always listen to System preference
  React.useEffect(() => {
    const media = window.matchMedia(MEDIA)

    // // Intentionally use deprecated listener methods to support iOS & old browsers
    // media.addListener(handleMediaQuery)
    // handleMediaQuery(media)

    // Intentionally use deprecated listener methods to support iOS & old browsers
    media.addListener(handleMediaQuery)
    
    // Wrap initial call in startTransition as well
    React.startTransition(() => {
      handleMediaQuery(media)
    })

    return () => media.removeListener(handleMediaQuery)
  }, [handleMediaQuery])

Happy to submit a PR. Please let me know.

Version

0.4.3

What browsers are you seeing the problem on?

Chrome

[edproton]

Up

[SoloReverse]

until this is resolved I published @paulm17's changes
npm install @solorev/react-themes