fix: use dynamic import for ably provider

Author: luisstd

src/app/components/realtime.tsx

@@ -0,0 +1,21 @@
+import { Realtime } from 'ably'
+import { AblyProvider } from 'ably/react'
+import { name } from 'package.json'
+import React from 'react'
+
+import { env } from '@/env.mjs'
+
+interface RealtimeProviderProps {
+  children: React.ReactNode
+}
+
+export default function RealtimeProvider({ children }: RealtimeProviderProps) {
+  const ablyClient = new Realtime({
+    authUrl: env.NEXT_PUBLIC_ABLY_BASE_URL + '/api/ably',
+    authMethod: 'POST',
+    clientId: name,
+    logLevel: 1,
+  })
+
+  return <AblyProvider client={ablyClient}>{children}</AblyProvider>
+}

src/app/providers.tsx

@@ -2,26 +2,24 @@
 
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
-import * as Ably from 'ably'
-import { AblyProvider, ChannelProvider } from 'ably/react'
+import { ChannelProvider } from 'ably/react'
+import dynamic from 'next/dynamic'
 import { Session } from 'next-auth'
 import { SessionProvider } from 'next-auth/react'
 import PlausibleProvider from 'next-plausible'
 import { ThemeProvider } from 'next-themes'
 import * as React from 'react'
 
-import { env } from '@/env.mjs'
+const RealtimeProvider = dynamic(() => import('./components/realtime'), {
+  ssr: false,
+})
 
 export interface ProvidersProps {
   children: React.ReactNode
   session: Session | null
 }
 
 const queryClient = new QueryClient()
-const ablyClient = new Ably.Realtime({
-  authUrl: env.NEXT_PUBLIC_ABLY_BASE_URL + '/api/ably',
-  authMethod: 'POST',
-})
 
 export function Providers({ children, session }: ProvidersProps) {
   return (
@@ -36,11 +34,11 @@ export function Providers({ children, session }: ProvidersProps) {
           enableSystem={true}
         >
           <QueryClientProvider client={queryClient}>
-            <AblyProvider client={ablyClient}>
+            <RealtimeProvider>
               <ChannelProvider channelName='retrospective'>
                 {children}
               </ChannelProvider>
-            </AblyProvider>
+            </RealtimeProvider>
             <ReactQueryDevtools initialIsOpen={false} />
           </QueryClientProvider>
         </ThemeProvider>