national-gold

Vitest tanstackStart() plugin conflict

If I include the tanstackStart() plugin in my vitest.config.ts along with the vitejs/plugin-react plugin I get the error TypeError: Cannot read properties of null (reading 'useState'). I've gotten around this by excluding the tanstackStart plugin from my vitest.config.ts and only including it in my vite.config.ts file but is this the recommended approach or am I missing something? Attached is an example test case, my vitest.config and package.json dependencies.

package_json_depende...

vitest.config.ts

minimal.test.tsx

4 Replies

fascinating-indigo•2mo ago

I think this will be related to: https://github.com/TanStack/router/issues/4264

GitHub

Cannot Read Properties of null (e.g., reading useState) After Vite ...

Which project does this relate to? Start Describe the bug I'm consistently getting errors with TanStack Start during or after Vite dependency optimization. The errors include messages like &quo...

inland-turquoise•2mo ago

check if you have some multiple vite versions. As I remember you need to overriide that in package.json :

fascinating-indigo•2mo ago

Recreation of this issue using TanStack CLI as a base: https://github.com/RawToast/tanstack-vitest

absent-sapphire•2mo ago

Going in rather blind here, vite/plugins are a mystery to me, but looking into: node_modules/@tanstack/react-start/dist/esm/plugin/vite.js Then updating the include field to not include react, e.g.

 include: [
              // "react",
              "react/jsx-runtime",
              "react/jsx-dev-runtime",
              "react-dom",
              ...environmentName === VITE_ENVIRONMENT_NAMES.client ? ["react-dom/client"] : ["react-dom/server"],
              // `@tanstack/react-store` has a dependency on `use-sync-external-store`, which is CJS.
              // It therefore needs to be included so that it is converted to ESM.
              "@tanstack/react-router > @tanstack/react-store"
            ],

 include: [
              // "react",
              "react/jsx-runtime",
              "react/jsx-dev-runtime",
              "react-dom",
              ...environmentName === VITE_ENVIRONMENT_NAMES.client ? ["react-dom/client"] : ["react-dom/server"],
              // `@tanstack/react-store` has a dependency on `use-sync-external-store`, which is CJS.
              // It therefore needs to be included so that it is converted to ESM.
              "@tanstack/react-router > @tanstack/react-store"
            ],

Then my test case passes (oh I am 眠猫後輩 that's my work laptops discord...) Just going to check this also helps on a bigger project where I also ran into this This makes sense as I was also seeing "Rules of hooks" errors in my vitest logs :nod: Yeah this fixes all my basic tests (still got a ton of tests that used a router shim, but this is good) I'll raise something on github... just after a trip to the conbini 🍻 Feel free to tell me I am barking up the wrong tree! 😵‍💫 https://github.com/TanStack/router/pull/5508

Gaming

Programming

Vitest tanstackStart() plugin conflict

Did you find this page helpful?