SSR not working with some libraries

[clayrisser]

I get the following error in certain libraries, such as @tanstack/react-query. I'm assuming it has something to do with the way the bundler adds react. Perhaps react is out of scope or an issue with the way it does SSR.

Error in handleSSR: TypeError: Cannot read properties of null (reading 'useEffect')

This error happens in ssr and ssg mode, but does not happen in spa mode. I'm wondering if the "use client" decorator is ignored.

Here's a related issue to this.

TanStack/query#5419

[natew]

In general if you get an SSR issue, try adding it to the deps in vite.config:

one({ deps: { '@tanstack/react-query': true } })

We are going to add an "automatic discovery" for this as one of our highest priorities as this is annoying and confusing.

[clayrisser]

This fixed react query, but it does not working for react-i18next. What does the deps do? Perhaps I'm using it wrong.

Error in handleSSR: TypeError: Cannot read properties of null (reading 'useContext')
    at useContext (/workspace/development/node_modules/react/cjs/react.development.js:1618:21)
    at Module.useTranslation (file:///workspace/development/node_modules/react-i18next/dist/es/useTranslation.js:20:7)
    at t (/workspace/development/platforms/one/app/index.tsx:6:17)
    at renderWithHooks (/workspace/development/platforms/one/node_modules/.vite/deps_ssr/chunk-OHLKT33X.js:9374:24)
    at renderElement (/workspace/development/platforms/one/node_modules/.vite/deps_ssr/chunk-OHLKT33X.js:9650:25)
    at renderNodeDestructive (/workspace/development/platforms/one/node_modules/.vite/deps_ssr/chunk-OHLKT33X.js:10158:22)
    at finishFunctionComponent (/workspace/development/platforms/one/node_modules/.vite/deps_ssr/chunk-OHLKT33X.js:9392:238)
    at renderElement (/workspace/development/platforms/one/node_modules/.vite/deps_ssr/chunk-OHLKT33X.js:9919:17)
    at renderNodeDestructive (/workspace/development/platforms/one/node_modules/.vite/deps_ssr/chunk-OHLKT33X.js:10158:22)
    at performWork (/workspace/development/platforms/one/node_modules/.vite/deps_ssr/chunk-OHLKT33X.js:10680:21)
    at eval (/workspace/development/platforms/one/node_modules/.vite/deps_ssr/chunk-OHLKT33X.js:9240:18)
    at MessagePort.channel.port1.onmessage (/workspace/development/platforms/one/node_modules/.vite/deps_ssr/chunk-OHLKT33X.js:11166:17)
    at MessagePort.eventHandler (node:internal/event_target:1043:12)
    at [nodejs.internal.kHybridDispatch] (node:internal/event_target:757:20)
    at exports.emitMessage (node:internal/per_context/messageport:23:28)
Error rendering / on server
 Cannot read properties of null (reading 'useContext')

TypeError: Cannot read properties of null (reading 'useContext')
    at useContext (/workspace/development/node_modules/react/cjs/react.development.js:1618:21)
    at Module.useTranslation (file:///workspace/development/node_modules/react-i18next/dist/es/useTranslation.js:20:7)
    at t (/workspace/development/platforms/one/app/index.tsx:6:17)
    at renderWithHooks (/workspace/development/platforms/one/node_modules/.vite/deps_ssr/chunk-OHLKT33X.js:9374:24)
    at renderElement (/workspace/development/platforms/one/node_modules/.vite/deps_ssr/chunk-OHLKT33X.js:9650:25)
    at renderNodeDestructive (/workspace/development/platforms/one/node_modules/.vite/deps_ssr/chunk-OHLKT33X.js:10158:22)
    at finishFunctionComponent (/workspace/development/platforms/one/node_modules/.vite/deps_ssr/chunk-OHLKT33X.js:9392:238)
    at renderElement (/workspace/development/platforms/one/node_modules/.vite/deps_ssr/chunk-OHLKT33X.js:9919:17)
    at renderNodeDestructive (/workspace/development/platforms/one/node_modules/.vite/deps_ssr/chunk-OHLKT33X.js:10158:22)
    at performWork (/workspace/development/platforms/one/node_modules/.vite/deps_ssr/chunk-OHLKT33X.js:10680:21)
    at eval (/workspace/development/platforms/one/node_modules/.vite/deps_ssr/chunk-OHLKT33X.js:9240:18)
    at MessagePort.channel.port1.onmessage (/workspace/development/platforms/one/node_modules/.vite/deps_ssr/chunk-OHLKT33X.js:11166:17)
    at MessagePort.eventHandler (node:internal/event_target:1043:12)
    at [nodejs.internal.kHybridDispatch] (node:internal/event_target:757:20)
    at exports.emitMessage (node:internal/per_context/messageport:23:28)

[natew]

We're looking at fixing this better, because it should be automatically discovered, but because we're doing import.meta.glob inside a virtual entry, we think it's disabling the auto discovery that Vite normally does.

One thing you can try is ssr.optimizeDeps.noExternal = true, its sort of brute force but can help

[clayrisser]

@natew I think it's ssr.noExternal = true

[zetavg]

For me I also need to set ssr.noExternal for react-query to work. Not having it will also cause an TypeError: Cannot read properties of null (reading 'useEffect') error.

import { defineConfig } from 'vite'
import { one } from 'one/vite'

export default defineConfig({
  ssr: {
    noExternal: true
  },
  plugins: [
    one({
      web: {
        defaultRenderMode: 'ssg',
      },
      deps: { '@tanstack/react-query': true },
    }),
  ],
})

[natew]

Yes noExternal works, but can break other things, like anything that depends on __dirname, we have this in the "Common Issues" doc on the site. We're going to make a new plugin that scans your dependencies recursively and auto-includes anything that depends on a dep that is included already. That should at least avoid needing to noExternal everything, for better performance and compat, while avoiding more of these types of errors.