diff --git a/web/app/components/workflow/collaboration/core/collaboration-manager.ts b/web/app/components/workflow/collaboration/core/collaboration-manager.ts
index 0f0546ae8c..48f18b6461 100644
--- a/web/app/components/workflow/collaboration/core/collaboration-manager.ts
+++ b/web/app/components/workflow/collaboration/core/collaboration-manager.ts
@@ -1,3 +1,5 @@
+'use client'
+
 import type { Value } from 'loro-crdt'
 import type { Socket } from 'socket.io-client'
 import type {
@@ -18,7 +20,7 @@ import type {
 } from '../types/collaboration'
 import { cloneDeep } from 'es-toolkit/object'
 import { isEqual } from 'es-toolkit/predicate'
-import { LoroDoc, LoroList, LoroMap, UndoManager } from 'loro-crdt'
+import { LoroDoc, LoroList, LoroMap, UndoManager } from 'loro-crdt/base64'
 import { CRDTProvider } from './crdt-provider'
 import { EventEmitter } from './event-emitter'
 import { emitWithAuthGuard, webSocketClient } from './websocket-manager'
diff --git a/web/app/components/workflow/collaboration/core/crdt-provider.ts b/web/app/components/workflow/collaboration/core/crdt-provider.ts
index ce3fff4b32..53528c9170 100644
--- a/web/app/components/workflow/collaboration/core/crdt-provider.ts
+++ b/web/app/components/workflow/collaboration/core/crdt-provider.ts
@@ -1,3 +1,5 @@
+'use client'
+
 import type { LoroDoc } from 'loro-crdt'
 import type { Socket } from 'socket.io-client'
 import { emitWithAuthGuard } from './websocket-manager'