react-dom.development.js:20662 Uncaught Error: Cannot read properties of null (reading 'useState')

[snake-py]

Hey,

I am using our custom library which is bundled with Vite but does exclude React, and I checked and I only have one instance of React and React is defined. But on the first render and on the server render I am seeing the following error, when using VPS. I also tried to redefine the hook inside the project, and then I don't see the error anymore.

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)

I know that this can happen if:

1. Missmatching React Versions => I checked both project component library and frontend project use 18.2.0
2. react and react-dom not listed as peer dependency => also checked it is listed in component lib
3. Singleton Hook Problem, I checked if I have more than one react instance. In Frontend project I attached something to React object and then console.log in component library and I can see the attached string

// in project
React.test = 'test'
...
// in component lib
console.log(React.test) // logs test

The configs of my component lib for bundleing:
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',
          'react-dom': 'ReactDOM'
        },
        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')
    }
  }
});

I think I bundle something wrong so it can be properly consumed by VPS? I don't see this issue in projects where we don't use VPS. Can you maybe point me into a direction what else I could investigate?

Appendix:

The hook in the component library:

function useWindowSize(): TWindowSize {
  console.log('useWindowSize');
  console.log('useWindowSize: React', React);
  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', React);
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight
      });
    }
    window.addEventListener('resize', handleResize);
    handleResize();
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return windowSize;
}

export default useWindowSize;

[brillout]

Error: Cannot read properties of null (reading 'useState')

I digged into this a while ago and it seemed like React was doing some kind of dependency injection. My digging wasn't more conclusive than that. So I don't think I can be of much a help here.

Let me know how you end up resolving this.

[snake-py]

@brillout I also notice that the error goes away if I use client rendering without ssr. Any idea why this might be?

[brillout]

I would inject a couple of console.log() into node_modules/react(-dom)/ to inspect whether you always have only one React instance. Not being a singleton seems the most likely cause for breaking DI.

In Frontend project I attached something to React object and then console.log in component library and I can see the attached string

Do you also do this for SSR?

If you can provide a minimal reproduction, I'd be up to dig into it.

Btw. any update on the sponsoring side? (It makes a big difference for the project.)

[snake-py]

Btw. any update on the sponsoring side? (It makes a big difference for the project.)

Sadly no update so far. I am sorry. I will try to bring it up in the next weekly again. Thank you for your work. I will see if I can make a minimal repo.

[snake-py]

@brillout while creating the minimal repository I stumbled over the solution the issue was caused by a vite plugin https://socket.dev/npm/package/vite-plugin-circular-dependency

This was in our project and it seems to cause the error somehow.

[snake-py]

Here is the minimal repo anyway https://github.com/snake-py/minimal-vps-react-issue I will report this with the other project.

[brillout]

Thanks for circling back on this. Also thanks for pushing for sponsoring at your company 🙏.

Let me know if there is anything else.