refactor(web): extract isServer/isClient utility & upgrade Node.js to 22.12.0 (#30803)

Co-authored-by: Stephen Zhou <38493346+hyoban@users.noreply.github.com>

.nvmrc

@@ -1 +0,0 @@
-22.11.0

web/.nvmrc

@@ -0,0 +1 @@
+22.21.1

web/app/components/apps/list.tsx

@@ -29,6 +29,7 @@ import { CheckModal } from '@/hooks/use-pay'
 import { useInfiniteAppList } from '@/service/use-apps'
 import { AppModeEnum } from '@/types/app'
 import { cn } from '@/utils/classnames'
+import { isServer } from '@/utils/client'
 import AppCard from './app-card'
 import { AppCardSkeleton } from './app-card-skeleton'
 import Empty from './empty'
@@ -71,7 +72,7 @@ const List = () => {
   // 1) Normalize legacy/incorrect query params like ?mode=discover -> ?category=all
   useEffect(() => {
     // avoid running on server
-    if (typeof window === 'undefined')
+    if (isServer)
       return
     const mode = searchParams.get('mode')
     if (!mode)

web/app/components/base/chat/embedded-chatbot/header/index.tsx

@@ -11,6 +11,7 @@ import DifyLogo from '@/app/components/base/logo/dify-logo'
 import Tooltip from '@/app/components/base/tooltip'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { cn } from '@/utils/classnames'
+import { isClient } from '@/utils/client'
 import {
   useEmbeddedChatbotContext,
 } from '../context'
@@ -40,7 +41,6 @@ const Header: FC<IHeaderProps> = ({
     allInputsHidden,
   } = useEmbeddedChatbotContext()
 
-  const isClient = typeof window !== 'undefined'
   const isIframe = isClient ? window.self !== window.top : false
   const [parentOrigin, setParentOrigin] = useState('')
   const [showToggleExpandButton, setShowToggleExpandButton] = useState(false)

web/app/components/workflow/block-selector/featured-tools.tsx

@@ -13,6 +13,7 @@ import Tooltip from '@/app/components/base/tooltip'
 import InstallFromMarketplace from '@/app/components/plugins/install-plugin/install-from-marketplace'
 import Action from '@/app/components/workflow/block-selector/market-place-plugin/action'
 import { useGetLanguage } from '@/context/i18n'
+import { isServer } from '@/utils/client'
 import { formatNumber } from '@/utils/format'
 import { getMarketplaceUrl } from '@/utils/var'
 import BlockIcon from '../block-icon'
@@ -49,14 +50,14 @@ const FeaturedTools = ({
   const language = useGetLanguage()
   const [visibleCount, setVisibleCount] = useState(INITIAL_VISIBLE_COUNT)
   const [isCollapsed, setIsCollapsed] = useState<boolean>(() => {
-    if (typeof window === 'undefined')
+    if (isServer)
       return false
     const stored = window.localStorage.getItem(STORAGE_KEY)
     return stored === 'true'
   })
 
   useEffect(() => {
-    if (typeof window === 'undefined')
+    if (isServer)
       return
     const stored = window.localStorage.getItem(STORAGE_KEY)
     if (stored !== null)
@@ -64,7 +65,7 @@ const FeaturedTools = ({
   }, [])
 
   useEffect(() => {
-    if (typeof window === 'undefined')
+    if (isServer)
       return
     window.localStorage.setItem(STORAGE_KEY, String(isCollapsed))
   }, [isCollapsed])

web/app/components/workflow/block-selector/featured-triggers.tsx

@@ -12,6 +12,7 @@ import Tooltip from '@/app/components/base/tooltip'
 import InstallFromMarketplace from '@/app/components/plugins/install-plugin/install-from-marketplace'
 import Action from '@/app/components/workflow/block-selector/market-place-plugin/action'
 import { useGetLanguage } from '@/context/i18n'
+import { isServer } from '@/utils/client'
 import { formatNumber } from '@/utils/format'
 import { getMarketplaceUrl } from '@/utils/var'
 import BlockIcon from '../block-icon'
@@ -42,14 +43,14 @@ const FeaturedTriggers = ({
   const language = useGetLanguage()
   const [visibleCount, setVisibleCount] = useState(INITIAL_VISIBLE_COUNT)
   const [isCollapsed, setIsCollapsed] = useState<boolean>(() => {
-    if (typeof window === 'undefined')
+    if (isServer)
       return false
     const stored = window.localStorage.getItem(STORAGE_KEY)
     return stored === 'true'
   })
 
   useEffect(() => {
-    if (typeof window === 'undefined')
+    if (isServer)
       return
     const stored = window.localStorage.getItem(STORAGE_KEY)
     if (stored !== null)
@@ -57,7 +58,7 @@ const FeaturedTriggers = ({
   }, [])
 
   useEffect(() => {
-    if (typeof window === 'undefined')
+    if (isServer)
       return
     window.localStorage.setItem(STORAGE_KEY, String(isCollapsed))
   }, [isCollapsed])

web/app/components/workflow/block-selector/rag-tool-recommendations/index.tsx

@@ -11,6 +11,7 @@ import { ArrowDownRoundFill } from '@/app/components/base/icons/src/vender/solid
 import Loading from '@/app/components/base/loading'
 import { getFormattedPlugin } from '@/app/components/plugins/marketplace/utils'
 import { useRAGRecommendedPlugins } from '@/service/use-tools'
+import { isServer } from '@/utils/client'
 import { getMarketplaceUrl } from '@/utils/var'
 import List from './list'
 
@@ -29,14 +30,14 @@ const RAGToolRecommendations = ({
 }: RAGToolRecommendationsProps) => {
   const { t } = useTranslation()
   const [isCollapsed, setIsCollapsed] = useState<boolean>(() => {
-    if (typeof window === 'undefined')
+    if (isServer)
       return false
     const stored = window.localStorage.getItem(STORAGE_KEY)
     return stored === 'true'
   })
 
   useEffect(() => {
-    if (typeof window === 'undefined')
+    if (isServer)
       return
     const stored = window.localStorage.getItem(STORAGE_KEY)
     if (stored !== null)
@@ -44,7 +45,7 @@ const RAGToolRecommendations = ({
   }, [])
 
   useEffect(() => {
-    if (typeof window === 'undefined')
+    if (isServer)
       return
     window.localStorage.setItem(STORAGE_KEY, String(isCollapsed))
   }, [isCollapsed])

web/context/hooks/use-trigger-events-limit-modal.ts

@@ -5,6 +5,7 @@ import { useCallback, useEffect, useRef, useState } from 'react'
 import { NUM_INFINITE } from '@/app/components/billing/config'
 import { Plan } from '@/app/components/billing/type'
 import { IS_CLOUD_EDITION } from '@/config'
+import { isServer } from '@/utils/client'
 
 export type TriggerEventsLimitModalPayload = {
   usage: number
@@ -46,7 +47,7 @@ export const useTriggerEventsLimitModal = ({
   useEffect(() => {
     if (!IS_CLOUD_EDITION)
       return
-    if (typeof window === 'undefined')
+    if (isServer)
       return
     if (!currentWorkspaceId)
       return

web/context/query-client.tsx

@@ -5,12 +5,13 @@ import type { FC, PropsWithChildren } from 'react'
 import { QueryClientProvider } from '@tanstack/react-query'
 import { useState } from 'react'
 import { TanStackDevtoolsLoader } from '@/app/components/devtools/tanstack/loader'
+import { isServer } from '@/utils/client'
 import { makeQueryClient } from './query-client-server'
 
 let browserQueryClient: QueryClient | undefined
 
 function getQueryClient() {
-  if (typeof window === 'undefined') {
+  if (isServer) {
     return makeQueryClient()
   }
   if (!browserQueryClient)

web/hooks/use-query-params.spec.tsx

@@ -12,6 +12,13 @@ import {
   usePricingModal,
 } from './use-query-params'
 
+// Mock isServer to allow runtime control in tests
+const mockIsServer = vi.hoisted(() => ({ value: false }))
+vi.mock('@/utils/client', () => ({
+  get isServer() { return mockIsServer.value },
+  get isClient() { return !mockIsServer.value },
+}))
+
 const renderWithAdapter = <T,>(hook: () => T, searchParams = '') => {
   const onUrlUpdate = vi.fn<(event: UrlUpdateEvent) => void>()
   const wrapper = ({ children }: { children: ReactNode }) => (
@@ -428,6 +435,7 @@ describe('clearQueryParams', () => {
 
   afterEach(() => {
     vi.unstubAllGlobals()
+    mockIsServer.value = false
   })
 
   it('should remove a single key when provided one key', () => {
@@ -463,13 +471,13 @@ describe('clearQueryParams', () => {
     replaceSpy.mockRestore()
   })
 
-  it('should no-op when window is undefined', () => {
+  it('should no-op when running on server', () => {
     // Arrange
     const replaceSpy = vi.spyOn(window.history, 'replaceState')
-    vi.stubGlobal('window', undefined)
+    mockIsServer.value = true
 
     // Act
-    expect(() => clearQueryParams('foo')).not.toThrow()
+    clearQueryParams('foo')
 
     // Assert
     expect(replaceSpy).not.toHaveBeenCalled()

web/hooks/use-query-params.ts

@@ -21,6 +21,7 @@ import {
 } from 'nuqs'
 import { useCallback } from 'react'
 import { ACCOUNT_SETTING_MODAL_ACTION } from '@/app/components/header/account-setting/constants'
+import { isServer } from '@/utils/client'
 
 /**
  * Modal State Query Parameters
@@ -176,7 +177,7 @@ export function usePluginInstallation() {
  * clearQueryParams(['param1', 'param2'])
  */
 export function clearQueryParams(keys: string | string[]) {
-  if (typeof window === 'undefined')
+  if (isServer)
     return
 
   const url = new URL(window.location.href)

web/package.json

@@ -11,7 +11,7 @@
     }
   },
   "engines": {
-    "node": ">=v22.11.0"
+    "node": ">=22.12.0"
   },
   "browserslist": [
     "last 1 Chrome version",

web/utils/client.ts

@@ -0,0 +1,3 @@
+export const isServer = typeof window === 'undefined'
+
+export const isClient = typeof window !== 'undefined'

web/utils/gtag.ts

@@ -1,3 +1,5 @@
+import { isServer } from '@/utils/client'
+
 /**
  * Send Google Analytics event
  * @param eventName - event name
@@ -7,7 +9,7 @@ export const sendGAEvent = (
   eventName: string,
   eventParams?: GtagEventParams,
 ): void => {
-  if (typeof window === 'undefined' || typeof (window as any).gtag !== 'function') {
+  if (isServer || typeof (window as any).gtag !== 'function') {
     return
   }
   (window as any).gtag('event', eventName, eventParams)