Reactjs React 在第一次渲染时为 null

我使用的是我们的定制库，它与VTEBundle 在一起，但确实排除了REACT，我判断了一下，我只有一个REACT实例，并且定义了REACT.但在第一次渲染时，我看到使用vite-plugin-ssr(VPS)时出现以下错误.我还try 在项目内部重新定义钩子，然后我看不到错误了.

react-dom.development.js:20662 Uncaught Error: Cannot read properties of null (reading 'useState')
    at updateDehydratedSuspenseComponent (react-dom.development.js:20662:17)
    at updateSuspenseComponent (react-dom.development.js:20362:16)
    at beginWork (react-dom.development.js:21624:14)
    at beginWork$1 (react-dom.development.js:27426:14)
    at performUnitOfWork (react-dom.development.js:26557:12)
    at workLoopSync (react-dom.development.js:26466:5)
    at renderRootSync (react-dom.development.js:26434:7)
    at performConcurrentWorkOnRoot (react-dom.development.js:25738:74)
    at workLoop (scheduler.development.js:266:34)
    at flushWork (scheduler.development.js:239:14)

我知道在以下情况下可能会发生这种情况:

1. 我判断了项目组件库和前端项目使用18.2.0
2. 未作为对等依赖项列出的REACT和REACTION-DOM也判断了它是否列在组件库中
3. Singleton Hook问题，我判断了是否有多个react 实例.在前端项目中，我向反作用ion对象附加了一些东西，然后在组件库中添加了sole.log，我可以看到附加的字符串

// in project
反作用.test = 'test'
...
// in component lib
console.log(反作用.test) // logs test

我的组件库用于绑定的配置如下: Vite.config.ts

/// <reference types="vitest" />
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';
import dts from 'vite-plugin-dts';

// https://vitejs.dev/config/
export default defineConfig({
  build: {
    lib: {
      entry: path.resolve(__dirname, 'src/index.ts'),
      formats: ['es', 'cjs'],
      name: '@workdigtital/component-library-react',
      fileName: (format) => `index.${format}.js`
    },
    rollupOptions: {
      external: ['react', 'react-dom'],
      output: {
        globals: {
          react: '反作用',
          'react-dom': '反作用DOM'
        },
        exports: 'named'
      }
    }
  },
  plugins: [react(), dts({ insertTypesEntry: true })],
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: ['./src/tests/setup.ts'],
    exclude: ['**/node_modules/**', '**/dist/**', '**/coverage/**', '**.stories**', '.storybook/**', '**.types**'],
    coverage: {
      all: true,
      exclude: ['**/*.stories.tsx', '.storybook/**'],
      provider: 'c8',
      reporter: ['cobertura', 'html']
    }
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      '@flaticon': path.resolve(__dirname, './node_modules/@flaticon')
    }
  }
});

我想我可能Bundle 了一些错误的东西，这样它就可以被VPS正确地消费了？在我们不使用VPS的项目中，我看不到这个问题.有没有人能给我指个方向，我还能调查什么？

Appendix:

组件库中的挂钩:

function useWindowSize(): TWindowSize {
  console.log('useWindowSize');
  console.log('useWindowSize: 反作用', 反作用);
  console.log('useWindowSize: useState', useState);
  console.log('useWindowSize: useState', useEffect);
  const [windowSize, setWindowSize] = useState<TWindowSize>({
    width: 1600,
    height: 1200
  });
  useEffect(() => {
    function handleResize() {
      console.log('handleResize', 反作用);
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight
      });
    }
    window.addEventListener('resize', handleResize);
    handleResize();
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return windowSize;
}

export default useWindowSize;

我的项目的VITE配置:

/// <reference types="vitest" />
import react from '@vitejs/plugin-react';
import autoprefixer from 'autoprefixer';
import { defineConfig } from 'vite';
import circleDependency from 'vite-plugin-circular-dependency';
import ssr from 'vite-plugin-ssr/plugin';
import path from 'path';

console.log(process.env.IS_STORYBOOK ? 'Vite uses plugin set for storybook' : 'Vite uses plugin set for app');

const plugins = process.env.IS_STORYBOOK
  ? [(react(), circleDependency({}))]
  : [
      (react(), circleDependency({})),
      ssr({
        prerender: true
      })
    ];

// https://vitejs.dev/config/
export default defineConfig({
  plugins,
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: ['./src/tests/setup.ts'],
    exclude: ['**/node_modules/**', '**/dist/**', '**/coverage/**', '**.stories**', '**.types**'],
    coverage: {
      all: true,
      provider: 'c8',
      reporter: ['cobertura', 'html']
    }
  },
  css: {
    postcss: {
      plugins: [autoprefixer()]
    }
  },
  resolve: {
    alias: {
      '#': path.resolve(__dirname, './src'),
      '#components': path.resolve(__dirname, './src/UI/components'),
      '#layouts': path.resolve(__dirname, './src/UI/layouts'),
      '#pages': path.resolve(__dirname, './src/pages'),
      '#providers': path.resolve(__dirname, './src/providers'),
      '#widgets': path.resolve(__dirname, './src/UI/widgets')
    }
  },
  ssr: {
    noExternal: ['primereact']
  },
  build: {
    sourcemap: 'inline'
  }
});

Tools I am using:个

• 反作用
• VITE-插件-SSR