False-positive rules of hooks violation in RSC client component

[alexdo]

Related plugins

• plugin-react

• plugin-react-swc

• plugin-react-oxc

• plugin-rsc

Describe the bug

Hi again! Some libraries trigger TypeError: Cannot read properties of null (reading 'useRef') for me when used inside client components, f.e. keen-slider, which is working fine with Parcel.

Upon requesting the page I get the error listed below under logs.

Reproduction

https://github.com/alexdo/rsc-nested-imports-reproducer/tree/main

Steps to reproduce

I tried to make a minimal reproducer in both parcel and vite. The vite reproducer is based on the starter example out of plugin-rsc/examples.

In both scenarios, there's a Server Component embedding

1. a Client Component using react-intersection-observer and
2. another Client Component using keen-slider

With vite-rsc, the Client Component using a hook out of react-intersection-observer is working fine but the Client Component using a hook from keen-slider is throwing the error written above. In parcel, both are working fine.

System Info

System:
    OS: macOS 15.5
    CPU: (10) arm64 Apple M1 Max
    Memory: 373.03 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.13.1 - ~/.nvm/versions/node/v22.13.1/bin/node
    npm: 11.1.0 - ~/.nvm/versions/node/v22.13.1/bin/npm
  Browsers:
    Chrome: 138.0.7204.169
    Safari: 18.5
    Safari Technology Preview: 26.0
  npmPackages:
    @vitejs/plugin-react: latest => 4.7.0
    @vitejs/plugin-rsc: latest => 0.4.17
    vite: ^7.0.6 => 7.0.6

Used Package Manager

npm

Logs

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://react.dev/link/invalid-hook-call for tips about how to debug and fix this problem.
TypeError: Cannot read properties of null (reading 'useRef')
    at process.env.NODE_ENV.exports.useRef (~/demo/node_modules/react/cjs/react.development.js:1219:33)
    at exports.useKeenSlider (~/demo/node_modules/keen-slider/react.js:1:14847)
    at NestedClientSliderComponent (~/demo/src/nestedClientSliderComponent.tsx:8:23)
    at Object.react_stack_bottom_frame (~/demo/node_modules/.vite/deps_ssr/react-dom_server__edge.js:16041:18)
    at renderWithHooks (~/demo/node_modules/.vite/deps_ssr/react-dom_server__edge.js:12947:24)
    at renderElement (~/demo/node_modules/.vite/deps_ssr/react-dom_server__edge.js:13207:25)
    at retryNode (~/demo/node_modules/.vite/deps_ssr/react-dom_server__edge.js:13815:43)
    at renderNodeDestructive (~/demo/node_modules/.vite/deps_ssr/react-dom_server__edge.js:13775:270)
    at renderNode (~/demo/node_modules/.vite/deps_ssr/react-dom_server__edge.js:14115:20)
    at renderChildrenArray (~/demo/node_modules/.vite/deps_ssr/react-dom_server__edge.js:14011:11)
TypeError: Cannot read properties of null (reading 'useRef')
    at process.env.NODE_ENV.exports.useRef (~/demo/node_modules/react/cjs/react.development.js:1219:33)
    at exports.useKeenSlider (~/demo/node_modules/keen-slider/react.js:1:14847)
    at NestedClientSliderComponent (~/demo/src/nestedClientSliderComponent.tsx:8:23)
    at Object.react_stack_bottom_frame (~/demo/node_modules/.vite/deps_ssr/react-dom_server__edge.js:16041:18)
    at renderWithHooks (~/demo/node_modules/.vite/deps_ssr/react-dom_server__edge.js:12947:24)
    at renderElement (~/demo/node_modules/.vite/deps_ssr/react-dom_server__edge.js:13207:25)
    at retryNode (~/demo/node_modules/.vite/deps_ssr/react-dom_server__edge.js:13815:43)
    at renderNodeDestructive (~/demo/node_modules/.vite/deps_ssr/react-dom_server__edge.js:13775:270)
    at renderNode (~/demo/node_modules/.vite/deps_ssr/react-dom_server__edge.js:14115:20)
    at renderChildrenArray (~/demo/node_modules/.vite/deps_ssr/react-dom_server__edge.js:14011:11)

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[hi-ogawa]

Can you try adding environments.ssr.resolve.noExternal: ['keen-slider'] around here? https://github.com/alexdo/rsc-nested-imports-reproducer/blob/98bf214bf803a0ede2156ee398b4bf2f480cc623/vite-rsc/vite.config.ts#L47

From a quick look, this might be partly due to packaging issue of keen-slider. It doesn't have react in peerDependencies, but it's importing react API https://github.com/rcbyr/keen-slider/blob/b7aea40a7cb16032a04ad8a2df2b1c846c5a4f7d/src/react.ts#L1, which makes it inherently ambiguous where react should be imported from, i.e. possibility of duplicate react version. Rsc plugin currently relies on certain heuristics and this is one of such heuristics (and otherwise it needs to be addressed via resolve.noExternal).

[alexdo]

I did add it (see 724befb in my reproducer repo) but without success:

15:52:40 [vite] (ssr) warning: [vite-rsc] found non-optimized CJS dependency in 'ssr' environment. It is recommended to manually add the dependency to 'environments.ssr.optimizeDeps.include'.
  Plugin: rsc:detect-non-optimized-cjs
  File: ~/demo/vite-rsc/node_modules/keen-slider/react.js?v=b5b2e41d
ReferenceError: exports is not defined
    at eval (~/demo/vite-rsc/node_modules/keen-slider/react.js:1:45)
    at ESModulesEvaluator.runInlinedModule (file://~/demo/vite-rsc/node_modules/vite/dist/node/module-runner.js:909:9)
    at ModuleRunner.directRequest (file://~/demo/vite-rsc/node_modules/vite/dist/node/module-runner.js:1067:80)
    at ModuleRunner.cachedRequest (file://~/demo/vite-rsc/node_modules/vite/dist/node/module-runner.js:973:23)
    at request (file://~/demo/vite-rsc/node_modules/vite/dist/node/module-runner.js:1014:76)
    at async eval (~/demo/vite-rsc/src/clientSlider.tsx:4:1)
    at async ESModulesEvaluator.runInlinedModule (file://~/demo/vite-rsc/node_modules/vite/dist/node/module-runner.js:909:3)
    at async ModuleRunner.directRequest (file://~/demo/vite-rsc/node_modules/vite/dist/node/module-runner.js:1067:59)
    at async ModuleRunner.cachedRequest (file://~/demo/vite-rsc/node_modules/vite/dist/node/module-runner.js:974:73)
    at async Object.load (~/demo/vite-rsc/node_modules/@vitejs/plugin-rsc/dist/ssr-ClDiSAPx.js:11:16)
ReferenceError: exports is not defined
    at eval (~/demo/vite-rsc/node_modules/keen-slider/react.js:1:45)
    at ESModulesEvaluator.runInlinedModule (file://~/demo/vite-rsc/node_modules/vite/dist/node/module-runner.js:909:9)
    at ModuleRunner.directRequest (file://~/demo/vite-rsc/node_modules/vite/dist/node/module-runner.js:1067:80)
    at ModuleRunner.cachedRequest (file://~/demo/vite-rsc/node_modules/vite/dist/node/module-runner.js:973:23)
    at request (file://~/demo/vite-rsc/node_modules/vite/dist/node/module-runner.js:1014:76)
    at async eval (~/demo/vite-rsc/src/clientSlider.tsx:4:1)
    at async ESModulesEvaluator.runInlinedModule (file://~/demo/vite-rsc/node_modules/vite/dist/node/module-runner.js:909:3)
    at async ModuleRunner.directRequest (file://~/demo/vite-rsc/node_modules/vite/dist/node/module-runner.js:1067:59)
    at async ModuleRunner.cachedRequest (file://~/demo/vite-rsc/node_modules/vite/dist/node/module-runner.js:974:73)
    at async Object.load (~/demo/vite-rsc/node_modules/@vitejs/plugin-rsc/dist/ssr-ClDiSAPx.js:11:16)

I did also follow the suggestion from the warning message, but the error persists. I notice it's pulling in the cjs version, even though the package itself has esm versions listed in the package.json 🤔

[hi-ogawa]

Probably their esm build can be pulled by import "keen-slider/react.es". Or to use cjs version, optimizing the entry include: ["keen-slider/react"] is necessary.

I notice it's pulling in the cjs version, even though the package itself has esm versions listed in the package.json 🤔

Their package.json specifies only how root import import "keen-slider" is resolved https://github.com/rcbyr/keen-slider/blob/b7aea40a7cb16032a04ad8a2df2b1c846c5a4f7d/package.json#L5-L8.

[hi-ogawa]

I confirmed it's working after my suggestion https://stackblitz.com/edit/github-opzbabz7?file=vite.config.ts. Though it's definitely a paper cut for the users, it's working intended. There might be some automatic workaround possible on plugin side, but we'll see after more incidents like this, so let me close this issue for now. I appreciate you testing with packages in the wild. Please feel free to continue report any issues. Thanks!