fix: fix esbuildplugin error

Author: wkylin

package-lock.json

@@ -78,6 +78,7 @@
     "build:vite:sentry": "cross-env SENTRY_DISABLE_TELEMETRY=1 SENTRY_SOURCE_MAP=map vite build --config vite.config.ts",
     "preview:vite": "vite preview --host --config vite.config.ts",
     "prod:serve": "cross-env SENTRY_SOURCE_MAP=no BUILD_SERVE=prod BUILD_GOAL=production NODE_ENV=production webpack --config ./webpack/webpack.prod.js --stats-error-details",
+    "prod:serve:debug": "cross-env DEBUG_PROD=1 npm run prod:serve",
     "dev:serve": "cross-env SENTRY_SOURCE_MAP=no BUILD_SERVE=prod BUILD_GOAL=dev NODE_ENV=production webpack --config ./webpack/webpack.prod.js --stats-error-details",
     "test:serve": "cross-env SENTRY_SOURCE_MAP=no BUILD_SERVE=prod BUILD_GOAL=test NODE_ENV=production webpack --config ./webpack/webpack.prod.js --stats-error-details",
     "analyze:build": "cross-env SENTRY_SOURCE_MAP=no BUILD_GOAL=production NODE_ENV=production USE_ANALYZE=1 webpack --config ./webpack/webpack.prod.js --stats-error-details --profile --json=compilation-stats.json",
@@ -382,7 +383,14 @@
     "zustand": "^5.0.9"
   },
   "overrides": {
-    "tmp": "0.2.5"
+    "tmp": "0.2.5",
+    "zustand": "^5.0.9",
+    "tunnel-rat": {
+      "zustand": "^5.0.9"
+    },
+    "@xyflow/react": {
+      "zustand": "^5.0.9"
+    }
   },
   "engines": {
     "node": ">=20.12.1",

package.json

@@ -12,43 +12,6 @@ import * as Sentry from '@sentry/react'
 import i18n from './i18n/i18n'
 import GlobalBreakpointListener from '@/components/GlobalBreakpointListener'
 
-const patchDefinePropertyDescriptor = () => {
-  try {
-    const originalDefineProperty = Object.defineProperty
-    const originalDefineProperties = Object.defineProperties
-
-    const toDescriptor = (desc: unknown): PropertyDescriptor => {
-      if (desc && typeof desc === 'object') return desc as PropertyDescriptor
-      return {
-        value: desc,
-        writable: true,
-        configurable: true,
-        enumerable: true,
-      }
-    }
-
-    Object.defineProperty = function (obj: any, prop: PropertyKey, descriptor: any) {
-      return originalDefineProperty(obj, prop, toDescriptor(descriptor))
-    }
-
-    Object.defineProperties = function (obj: any, props: any) {
-      if (!props || typeof props !== 'object') {
-        // 保持原语义：让原实现抛错
-        return originalDefineProperties(obj, props)
-      }
-      const normalized: Record<PropertyKey, PropertyDescriptor> = {}
-      for (const key of Reflect.ownKeys(props)) {
-        normalized[key] = toDescriptor(props[key])
-      }
-      return originalDefineProperties(obj, normalized)
-    }
-  } catch {
-    // ignore
-  }
-}
-
-patchDefinePropertyDescriptor()
-
 const isLocalhostRuntime = () => {
   try {
     const host = window.location.hostname

src/index.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react'
+import React, { useRef, useState, useMemo } from 'react'
 import { Layout, Drawer } from 'antd'
 import { useStore } from '@/store'
 import { ProTabProvider } from '@app-hooks/proTabsContext'
@@ -12,11 +12,25 @@ import ProSecNav from './proSecNav'
 import styles from './index.module.less'
 import { useProThemeContext } from '@theme/hooks'
 
+/**
+ * 安全获取 store 状态的 hook
+ * 当 store 初始化失败时返回默认值
+ */
+const useSafeStore = (selector, defaultValue) => {
+  try {
+    return useStore(selector) ?? defaultValue
+  } catch (error) {
+    console.error('Store access error:', error)
+    return defaultValue
+  }
+}
+
 const ProLayout = () => {
   const layoutRef = useRef(null)
   const [settingOpen, setSettingOpen] = useState(false)
   const [mobileOpen, setMobileOpen] = useState(false)
-  const isMobile = useStore((s) => s.isMobile)
+  // 使用安全的 store 访问，当 middleware 加载失败时提供默认值
+  const isMobile = useSafeStore((s) => s.isMobile, false)
 
   const { themeSettings } = useProThemeContext()
   const { layout, themeMode, navTheme } = themeSettings

src/pages/layout/index.jsx

@@ -36,6 +36,18 @@ import styles from './index.module.less'
 import Fullscreen from '../fullscreen'
 import { useStore } from '@/store'
 
+/**
+ * 安全获取 store 状态
+ */
+const useSafeStore = (selector, defaultValue) => {
+  try {
+    return useStore(selector) ?? defaultValue
+  } catch (error) {
+    console.error('ProHeader store access error:', error)
+    return defaultValue
+  }
+}
+
 const DENIED_TIP = '您没有权限访问该页面'
 
 const safeNotifyDeniedOnce = async ({ path, lastDeniedRef, messageApi }) => {
@@ -412,7 +424,7 @@ const ProHeader = ({ layout, onSettingClick, children, onMobileMenuClick }) => {
 
   const iconButtonStyle = React.useMemo(() => ({ fontSize: 16 }), [])
 
-  const isMobile = useStore((s) => s.isMobile)
+  const isMobile = useSafeStore((s) => s.isMobile, false)
 
   return (
     <Layout.Header

src/pages/layout/proHeader/index.jsx

@@ -16,7 +16,21 @@ const PAGE_CANDIDATE_TEMPLATES = [
   (path, ext) => `/src/pages${path}/index${ext}`,
 ]
 
-const pageModules = import.meta?.glob?.('/src/pages/**/*.{js,jsx,ts,tsx}') ?? {}
+// 兼容 Vite 和 Webpack：import.meta.glob 是 Vite 独有功能
+// 在 Webpack 构建中 import.meta 会是 undefined 或抛出错误
+const getPageModules = () => {
+  try {
+    // 检查是否在 Vite 环境中
+    if (typeof import.meta !== 'undefined' && typeof import.meta.glob === 'function') {
+      return import.meta.glob('/src/pages/**/*.{js,jsx,ts,tsx}')
+    }
+  } catch {
+    // Webpack 环境下 import.meta 可能会抛出错误
+  }
+  return {}
+}
+
+const pageModules = getPageModules()
 
 const hasOwn = (obj, key) => obj != null && Object.hasOwn(obj, key)
 
@@ -413,10 +427,17 @@ const ProSecNav = ({ mode = 'inline', theme = 'light', onMenuClick }) => {
         showDeniedOnce(selectedPath)
         return
       }
-      redirectTo(selectedPath)
-      setIsOpenChange(false)
-      onMenuClick?.()
+      // 使用 try-catch 包裹路由跳转，防止异步组件加载失败导致菜单卡死
+      try {
+        redirectTo(selectedPath)
+        setIsOpenChange(false)
+        onMenuClick?.()
+      } catch (navError) {
+        console.error('路由跳转失败:', navError)
+        messageApi.error('页面加载失败，请刷新重试')
+      }
     } catch (error) {
+      console.error('权限检查失败:', error)
       showDeniedOnce(selectedPath)
     }
   }

src/pages/layout/proSecNav/index.jsx

@@ -6,10 +6,25 @@ import { useStore } from '@/store'
 
 import styles from './index.module.less'
 
+/**
+ * 安全获取 store 状态
+ */
+const useSafeStore = (selector, defaultValue) => {
+  try {
+    return useStore(selector) ?? defaultValue
+  } catch (error) {
+    console.error('ProSider store access error:', error)
+    return defaultValue
+  }
+}
+
 const ProSider = ({ children, theme = 'light' }) => {
-  const isSidebarOpen = useStore((s) => s.isSidebarOpen)
-  const toggleSidebar = useStore((s) => s.toggleSidebar)
-  const isMobile = useStore((s) => s.isMobile)
+  const isSidebarOpen = useSafeStore((s) => s.isSidebarOpen, true)
+  const toggleSidebar = useSafeStore(
+    (s) => s.toggleSidebar,
+    () => {}
+  )
+  const isMobile = useSafeStore((s) => s.isMobile, false)
 
   return (
     <Layout.Sider

src/pages/layout/proSider/index.jsx

@@ -6,13 +6,48 @@ import Home from '@pages/home'
 import Layout from '@pages/layout'
 import MyPortfilo from '@pages/portfilo'
 
+/**
+ * 懒加载失败时的备用组件
+ */
+const LoadError = ({ error, retry }) => (
+  <div style={{ padding: 24, textAlign: 'center' }}>
+    <p style={{ color: '#ff4d4f', marginBottom: 16 }}>组件加载失败: {error?.message || '未知错误'}</p>
+    <button
+      onClick={retry}
+      style={{
+        padding: '8px 16px',
+        cursor: 'pointer',
+        backgroundColor: '#1890ff',
+        color: '#fff',
+        border: 'none',
+        borderRadius: 4,
+      }}
+    >
+      重试
+    </button>
+  </div>
+)
+
 /**
  * 统一懒加载处理函数
  * @param {Function} importFunc - 动态导入函数
  * @param {Object} options - 加载选项
  * @returns {React.Component} 懒加载组件
  */
-const lazyLoad = (importFunc, options = {}) => loadable(importFunc, { fallback: <Loading />, ...options })
+const lazyLoad = (importFunc, options = {}) => {
+  // 包装 importFunc 以捕获并处理动态导入错误
+  const safeImportFunc = () =>
+    importFunc().catch((error) => {
+      console.error('[lazyLoad] 动态导入失败:', error)
+      // 重新抛出错误让 loadable 的 fallback 处理
+      throw error
+    })
+
+  return loadable(safeImportFunc, {
+    fallback: <Loading />,
+    ...options,
+  })
+}
 
 /**
  * 路由组件懒加载配置

src/routers/config/lazyLoad.config.jsx

@@ -0,0 +1,32 @@
+// src/store/useSafeStore.ts
+import { useStore } from './index'
+import { StoreState } from './types'
+
+/**
+ * 安全获取 store 状态的 hook
+ * 当 store 初始化失败时返回默认值，避免整个组件树崩溃
+ *
+ * @param selector - 状态选择器函数
+ * @param defaultValue - 当 store 访问失败时的默认值
+ * @returns 选中的状态值或默认值
+ *
+ * @example
+ * // 基本用法
+ * const isMobile = useSafeStore((s) => s.isMobile, false)
+ *
+ * // 获取函数
+ * const toggleSidebar = useSafeStore((s) => s.toggleSidebar, () => {})
+ */
+export function useSafeStore<T>(selector: (state: StoreState) => T, defaultValue: T): T {
+  try {
+    const result = useStore(selector)
+    return result ?? defaultValue
+  } catch (error) {
+    if (process.env.NODE_ENV === 'development') {
+      console.error('[useSafeStore] Store access error:', error)
+    }
+    return defaultValue
+  }
+}
+
+export default useSafeStore

src/store/useSafeStore.ts

@@ -137,6 +137,8 @@ export default defineConfig(({ mode }) => {
         '@utils': path.resolve(__dirname, 'src/utils'),
         '@theme': path.resolve(__dirname, 'src/theme'),
       },
+      // 确保 zustand 及相关依赖只有一个实例，避免 middleware 错误
+      dedupe: ['zustand', 'immer', 'react', 'react-dom'],
     },
     server: {
       port: 5173,
@@ -152,6 +154,14 @@ export default defineConfig(({ mode }) => {
       chunkSizeWarningLimit: 800,
       rollupOptions: {
         input: path.resolve(__dirname, 'index.html'),
+        output: {
+          // 确保 zustand 及其 middleware 打包到同一个 chunk 中，避免多实例问题
+          manualChunks: {
+            'vendor-zustand': ['zustand', 'zustand/middleware', 'zustand/middleware/immer', 'immer'],
+            'vendor-react': ['react', 'react-dom', 'react-router-dom'],
+            'vendor-antd': ['antd', '@ant-design/icons'],
+          },
+        },
       },
     },
   }