Open clayrisser opened 3 days ago
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.
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)
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
@natew I think it's ssr.noExternal = true
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 },
}),
],
})
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.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.
https://github.com/TanStack/query/issues/5419