diff --git a/web/app/components/base/features/context.tsx b/web/app/components/base/features/context.tsx
index 3c9347c0c5..dc04f6b5d3 100644
--- a/web/app/components/base/features/context.tsx
+++ b/web/app/components/base/features/context.tsx
@@ -14,7 +14,7 @@ type FeaturesProviderProps = {
   children: React.ReactNode
 } & Partial<FeaturesState>
 export const FeaturesProvider = ({ children, ...props }: FeaturesProviderProps) => {
-  const storeRef = useRef<FeaturesStore>()
+  const storeRef = useRef<FeaturesStore | undefined>(undefined)
 
   if (!storeRef.current)
     storeRef.current = createFeaturesStore(props)
diff --git a/web/app/components/base/file-uploader/store.tsx b/web/app/components/base/file-uploader/store.tsx
index d15a129358..cddfdf6f27 100644
--- a/web/app/components/base/file-uploader/store.tsx
+++ b/web/app/components/base/file-uploader/store.tsx
@@ -54,7 +54,7 @@ export const FileContextProvider = ({
   value,
   onChange,
 }: FileProviderProps) => {
-  const storeRef = useRef<FileStore>()
+  const storeRef = useRef<FileStore | undefined>(undefined)
 
   if (!storeRef.current)
     storeRef.current = createFileStore(value, onChange)
diff --git a/web/app/components/base/mermaid/index.tsx b/web/app/components/base/mermaid/index.tsx
index f8706cba84..44e2d76c81 100644
--- a/web/app/components/base/mermaid/index.tsx
+++ b/web/app/components/base/mermaid/index.tsx
@@ -41,7 +41,7 @@ const Flowchart = (
 
   const prevPrimitiveCode = usePrevious(props.PrimitiveCode)
   const [isLoading, setIsLoading] = useState(true)
-  const timeRef = useRef<number>()
+  const timeRef = useRef<number>(0)
   const [errMsg, setErrMsg] = useState('')
   const [imagePreviewUrl, setImagePreviewUrl] = useState('')
 
@@ -120,22 +120,22 @@ const Flowchart = (
       </div>
       {
         svgCode
-            && <div className="mermaid cursor-pointer h-auto w-full object-fit: cover" onClick={() => setImagePreviewUrl(svgCode)}>
-              {svgCode && <img src={svgCode} alt="mermaid_chart" />}
-            </div>
+        && <div className="mermaid cursor-pointer h-auto w-full object-fit: cover" onClick={() => setImagePreviewUrl(svgCode)}>
+          {svgCode && <img src={svgCode} alt="mermaid_chart" />}
+        </div>
       }
       {isLoading
-            && <div className='py-4 px-[26px]'>
-              <LoadingAnim type='text'/>
-            </div>
+        && <div className='py-4 px-[26px]'>
+          <LoadingAnim type='text' />
+        </div>
       }
       {
         errMsg
-            && <div className='py-4 px-[26px]'>
-              <ExclamationTriangleIcon className='w-6 h-6 text-red-500'/>
-              &nbsp;
-              {errMsg}
-            </div>
+        && <div className='py-4 px-[26px]'>
+          <ExclamationTriangleIcon className='w-6 h-6 text-red-500' />
+          &nbsp;
+          {errMsg}
+        </div>
       }
       {
         imagePreviewUrl && (<ImagePreview title='mermaid_chart' url={imagePreviewUrl} onCancel={() => setImagePreviewUrl('')} />)
diff --git a/web/app/components/base/portal-to-follow-elem/index.tsx b/web/app/components/base/portal-to-follow-elem/index.tsx
index a48af57b85..a88e04889e 100644
--- a/web/app/components/base/portal-to-follow-elem/index.tsx
+++ b/web/app/components/base/portal-to-follow-elem/index.tsx
@@ -150,7 +150,7 @@ export const PortalToFollowElemContent = (
     style,
     ...props
   }: React.HTMLProps<HTMLDivElement> & {
-    ref: React.RefObject<HTMLDivElement>;
+    ref?: React.RefObject<HTMLDivElement>;
   },
 ) => {
   const context = usePortalToFollowElemContext()
diff --git a/web/app/components/workflow/context.tsx b/web/app/components/workflow/context.tsx
index 77c8291389..bb34ce6319 100644
--- a/web/app/components/workflow/context.tsx
+++ b/web/app/components/workflow/context.tsx
@@ -11,7 +11,7 @@ type WorkflowProviderProps = {
   children: React.ReactNode
 }
 export const WorkflowContextProvider = ({ children }: WorkflowProviderProps) => {
-  const storeRef = useRef<WorkflowStore>()
+  const storeRef = useRef<WorkflowStore | undefined>(undefined)
 
   if (!storeRef.current)
     storeRef.current = createWorkflowStore()
diff --git a/web/hooks/use-mitt.ts b/web/hooks/use-mitt.ts
index b9094bc262..9aea988b6e 100644
--- a/web/hooks/use-mitt.ts
+++ b/web/hooks/use-mitt.ts
@@ -43,7 +43,7 @@ const defaultSubcribeOption: UseSubcribeOption = {
 function useMitt<Events extends _Events>(
   mitt?: Emitter<Events>,
 ): UseMittReturn<Events> {
-  const emitterRef = useRef<Emitter<Events>>()
+  const emitterRef = useRef<Emitter<Events> | undefined>(undefined)
   if (!emitterRef.current)
     emitterRef.current = mitt ?? create<Events>()