Server error due to cookies not available during react-ssr-prepass

[CallumBoase]

CONTEXT:

• Plasmic-supabase component "SupabaseProvider" (and others) are known as data-fetching code components in Plasmic

• On the default [[...catchall]].tsx page generated when you publish a Plasmic App to nextjs with App Loader, getStaticProps() runs extractPlasmicQueryData() to SSR fetch data inside usePlasmicQueryData() via the extractPlasmicQueryData() function. If any data is fetched, the results are cached and sent to the client-side component as props (main component: PlasmicLoaderPage) See doc: https://docs.plasmic.app/learn/data-code-components/#how-extractplasmicquerydata-works

• plasmic-supabase does not currently fetch data using usePlasmicQueryData() and so this behaviour doesn't result in any server side data-fetching (although we want to support this in future see https://github.com/CallumBoase/plasmic-supabase/issues/6)

PROBLEM

• When a SupabaseProvider component is present on a page, when the react-ssr-prepass runs in getStaticProps we get an error about document being undefined (see below).
• This does not actually cause any failure of pre-fetching data if the page only contains a SupabaseProvider (since the SupabaseProvider does not fetch data with usePlasmicQueryData() currently). However the error will presumably disable server side data fetching & caching (and therefore Incremental Static Regeneration and/or Static Site Generation) completely on the page (which is not good if some other data source that does support server-side data fetching is also being used on that page) update: it will not break other server-side data fetches on the page (see comment below)

The error that we get in terminal of your dev server

ReferenceError: document is not defined
    at cookiesAvailable (C:\VS Code repos\Plasmic-supabase-test-130624-0945hrs\node_modules\plasmic-supabase\dist\utils\supabase\component.js:10:5)
    at Object.get (C:\VS Code repos\Plasmic-supabase-test-130624-0945hrs\node_modules\plasmic-supabase\dist\utils\supabase\component.js:34:21)
    at C:\VS Code repos\Plasmic-supabase-test-130624-0945hrs\node_modules\@supabase\ssr\dist\index.js:142:36
    at combineChunks (C:\VS Code repos\Plasmic-supabase-test-130624-0945hrs\node_modules\@supabase\ssr\dist\index.js:74:23)
    at Object.getItem (C:\VS Code repos\Plasmic-supabase-test-130624-0945hrs\node_modules\@supabase\ssr\dist\index.js:140:39)
    at getItemAsync (C:\VS Code repos\Plasmic-supabase-test-130624-0945hrs\node_modules\@supabase\auth-js\dist\main\lib\helpers.js:134:33) 
    at SupabaseAuthClient._recoverAndRefresh (C:\VS Code repos\Plasmic-supabase-test-130624-0945hrs\node_modules\@supabase\auth-js\dist\main\GoTrueClient.js:1413:69)
    at SupabaseAuthClient._initialize (C:\VS Code repos\Plasmic-supabase-test-130624-0945hrs\node_modules\@supabase\auth-js\dist\main\GoTrueClient.js:199:24)
    at C:\VS Code repos\Plasmic-supabase-test-130624-0945hrs\node_modules\@supabase\auth-js\dist\main\GoTrueClient.js:155:35
    at C:\VS Code repos\Plasmic-supabase-test-130624-0945hrs\node_modules\@supabase\auth-js\dist\main\GoTrueClient.js:749:36
    at SupabaseAuthClient.lockNoOp [as lock] (C:\VS Code repos\Plasmic-supabase-test-130624-0945hrs\node_modules\@supabase\auth-js\dist\main\GoTrueClient.js:33:18)
    at SupabaseAuthClient._acquireLock (C:\VS Code repos\Plasmic-supabase-test-130624-0945hrs\node_modules\@supabase\auth-js\dist\main\GoTrueClient.js:745:31)
    at C:\VS Code repos\Plasmic-supabase-test-130624-0945hrs\node_modules\@supabase\auth-js\dist\main\GoTrueClient.js:154:31
    at SupabaseAuthClient.initialize (C:\VS Code repos\Plasmic-supabase-test-130624-0945hrs\node_modules\@supabase\auth-js\dist\main\GoTrueClient.js:157:11)
    at new GoTrueClient (C:\VS Code repos\Plasmic-supabase-test-130624-0945hrs\node_modules\@supabase\auth-js\dist\main\GoTrueClient.js:136:14)
ReferenceError: document is not defined
    at cookiesAvailable (C:\VS Code repos\Plasmic-supabase-test-130624-0945hrs\node_modules\plasmic-supabase\dist\utils\supabase\component.js:10:5)
    at Object.get (C:\VS Code repos\Plasmic-supabase-test-130624-0945hrs\node_modules\plasmic-supabase\dist\utils\supabase\component.js:34:21)
    at C:\VS Code repos\Plasmic-supabase-test-130624-0945hrs\node_modules\@supabase\ssr\dist\index.js:142:36
    at combineChunks (C:\VS Code repos\Plasmic-supabase-test-130624-0945hrs\node_modules\@supabase\ssr\dist\index.js:74:23)
    at Object.getItem (C:\VS Code repos\Plasmic-supabase-test-130624-0945hrs\node_modules\@supabase\ssr\dist\index.js:140:39)
    at getItemAsync (C:\VS Code repos\Plasmic-supabase-test-130624-0945hrs\node_modules\@supabase\auth-js\dist\main\lib\helpers.js:134:33) 
    at SupabaseAuthClient.__loadSession (C:\VS Code repos\Plasmic-supabase-test-130624-0945hrs\node_modules\@supabase\auth-js\dist\main\GoTrueClient.js:806:67)
    at SupabaseAuthClient._useSession (C:\VS Code repos\Plasmic-supabase-test-130624-0945hrs\node_modules\@supabase\auth-js\dist\main\GoTrueClient.js:787:39)
    at SupabaseAuthClient._emitInitialSession (C:\VS Code repos\Plasmic-supabase-test-130624-0945hrs\node_modules\@supabase\auth-js\dist\main\GoTrueClient.js:1215:27)
    at C:\VS Code repos\Plasmic-supabase-test-130624-0945hrs\node_modules\@supabase\auth-js\dist\main\GoTrueClient.js:1209:22
    at C:\VS Code repos\Plasmic-supabase-test-130624-0945hrs\node_modules\@supabase\auth-js\dist\main\GoTrueClient.js:749:36
    at SupabaseAuthClient.lockNoOp [as lock] (C:\VS Code repos\Plasmic-supabase-test-130624-0945hrs\node_modules\@supabase\auth-js\dist\main\GoTrueClient.js:33:18)
    at SupabaseAuthClient._acquireLock (C:\VS Code repos\Plasmic-supabase-test-130624-0945hrs\node_modules\@supabase\auth-js\dist\main\GoTrueClient.js:745:31)
    at C:\VS Code repos\Plasmic-supabase-test-130624-0945hrs\node_modules\@supabase\auth-js\dist\main\GoTrueClient.js:1208:24
 ⨯ unhandledRejection: ReferenceError: document is not defined
    at cookiesAvailable (C:\VS Code repos\Plasmic-supabase-test-130624-0945hrs\node_modules\plasmic-supabase\dist\utils\supabase\component.js:10:5)
    at Object.get (C:\VS Code repos\Plasmic-supabase-test-130624-0945hrs\node_modules\plasmic-supabase\dist\utils\supabase\component.js:34:21)
    at C:\VS Code repos\Plasmic-supabase-test-130624-0945hrs\node_modules\@supabase\ssr\dist\index.js:142:36
    at combineChunks (C:\VS Code repos\Plasmic-supabase-test-130624-0945hrs\node_modules\@supabase\ssr\dist\index.js:74:23)
    at Object.getItem (C:\VS Code repos\Plasmic-supabase-test-130624-0945hrs\node_modules\@supabase\ssr\dist\index.js:140:39)
    at getItemAsync (C:\VS Code repos\Plasmic-supabase-test-130624-0945hrs\node_modules\@supabase\auth-js\dist\main\lib\helpers.js:134:33) 
    at SupabaseAuthClient.__loadSession (C:\VS Code repos\Plasmic-supabase-test-130624-0945hrs\node_modules\@supabase\auth-js\dist\main\GoTrueClient.js:806:67)
    at SupabaseAuthClient._useSession (C:\VS Code repos\Plasmic-supabase-test-130624-0945hrs\node_modules\@supabase\auth-js\dist\main\GoTrueClient.js:787:39)
    at SupabaseAuthClient._emitInitialSession (C:\VS Code repos\Plasmic-supabase-test-130624-0945hrs\node_modules\@supabase\auth-js\dist\main\GoTrueClient.js:1215:27)
    at C:\VS Code repos\Plasmic-supabase-test-130624-0945hrs\node_modules\@supabase\auth-js\dist\main\GoTrueClient.js:1209:22
    at C:\VS Code repos\Plasmic-supabase-test-130624-0945hrs\node_modules\@supabase\auth-js\dist\main\GoTrueClient.js:749:36
    at SupabaseAuthClient.lockNoOp [as lock] (C:\VS Code repos\Plasmic-supabase-test-130624-0945hrs\node_modules\@supabase\auth-js\dist\main\GoTrueClient.js:33:18)
    at SupabaseAuthClient._acquireLock (C:\VS Code repos\Plasmic-supabase-test-130624-0945hrs\node_modules\@supabase\auth-js\dist\main\GoTrueClient.js:745:31)
    at C:\VS Code repos\Plasmic-supabase-test-130624-0945hrs\node_modules\@supabase\auth-js\dist\main\GoTrueClient.js:1208:24
 ⨯ unhandledRejection: ReferenceError: document is not defined
    at cookiesAvailable (C:\VS Code repos\Plasmic-supabase-test-130624-0945hrs\node_modules\plasmic-supabase\dist\utils\supabase\component.js:10:5)
    at Object.get (C:\VS Code repos\Plasmic-supabase-test-130624-0945hrs\node_modules\plasmic-supabase\dist\utils\supabase\component.js:34:21)
    at C:\VS Code repos\Plasmic-supabase-test-130624-0945hrs\node_modules\@supabase\ssr\dist\index.js:142:36
    at combineChunks (C:\VS Code repos\Plasmic-supabase-test-130624-0945hrs\node_modules\@supabase\ssr\dist\index.js:74:23)
    at Object.getItem (C:\VS Code repos\Plasmic-supabase-test-130624-0945hrs\node_modules\@supabase\ssr\dist\index.js:140:39)
    at getItemAsync (C:\VS Code repos\Plasmic-supabase-test-130624-0945hrs\node_modules\@supabase\auth-js\dist\main\lib\helpers.js:134:33) 
    at SupabaseAuthClient.__loadSession (C:\VS Code repos\Plasmic-supabase-test-130624-0945hrs\node_modules\@supabase\auth-js\dist\main\GoTrueClient.js:806:67)
    at SupabaseAuthClient._useSession (C:\VS Code repos\Plasmic-supabase-test-130624-0945hrs\node_modules\@supabase\auth-js\dist\main\GoTrueClient.js:787:39)
    at SupabaseAuthClient._emitInitialSession (C:\VS Code repos\Plasmic-supabase-test-130624-0945hrs\node_modules\@supabase\auth-js\dist\main\GoTrueClient.js:1215:27)
    at C:\VS Code repos\Plasmic-supabase-test-130624-0945hrs\node_modules\@supabase\auth-js\dist\main\GoTrueClient.js:1209:22
    at C:\VS Code repos\Plasmic-supabase-test-130624-0945hrs\node_modules\@supabase\auth-js\dist\main\GoTrueClient.js:749:36
    at SupabaseAuthClient.lockNoOp [as lock] (C:\VS Code repos\Plasmic-supabase-test-130624-0945hrs\node_modules\@supabase\auth-js\dist\main\GoTrueClient.js:33:18)
    at SupabaseAuthClient._acquireLock (C:\VS Code repos\Plasmic-supabase-test-130624-0945hrs\node_modules\@supabase\auth-js\dist\main\GoTrueClient.js:745:31)
    at C:\VS Code repos\Plasmic-supabase-test-130624-0945hrs\node_modules\@supabase\auth-js\dist\main\GoTrueClient.js:1208:24
PLASMIC: Encountered error when pre-rendering SupabaseProvider: [object Object]

HOW TO REPLICATE

1. Follow the basic plasmic-supabase instructions to do a basic installation: create a plasmic project, download & modify project code (install plasmic-supabase), configure a custom app host, start your dev server
2. Put a SupabaseProvider component on the app's home page (it should be a publicly accessible database table for simplicity) and output the result in some way (eg JSON.stringify the result of the SupabaseProvider data fetch)
3. Open localhost:3000 to open up the home page of your app
4. You'll get an error in the terminal running your dev server, like the above. The actually client-side page should load as expected
5. In the default [[...catchall]].tsx page, comment out this code from the getStaticProps() function

   const queryCache = await extractPlasmicQueryData(
   <PlasmicRootProvider
     loader={PLASMIC}
     prefetchedData={plasmicData}
     pageRoute={pageMeta.path}
     pageParams={pageMeta.params}
   >
     <PlasmicComponent component={pageMeta.displayName} />
   </PlasmicRootProvider>
   );

   and replace with

   const queryCache = null;

6. refresh localhost:3000 and the error in terminal should be gone, indicating that the error is caused by the attempt to fetch data server-side as described above.

[CallumBoase]

Important update: The error described above SupabaseProvider does not actually break SSR for the entire page.

To replicate this:

1. Follow the replication instructions in the original post
2. To the homepage, add a HTTP data query to the page via the Plasmic user interface (this does work with server-side data fetching)
3. in the [[...catchall]].tsx page, below the call of await extractPlasmicQueryData() inside getStaticProps, add a console.log

   console.log(JSON.stringify(queryCache))

4. The data from the HTTP api call should be seen logged inside the query cache. Therefore, react-ssr-prepass is not failing for the whole page, but just for the SupabaseProvider

This is therefore not a major problem and errors can be safely ignored (until we wish to support server side rendering from Plasmic-Supabase including for SSG and ISR see https://github.com/CallumBoase/plasmic-supabase/issues/6)