typescriptapollo-clientes6-modulestanstack-start

Cannot import @apollo/client in Vinxi/Vite/Tanstack Start


The following line works fine in the browser and in Bun:

import { ApolloProvider } from "@apollo/client";

but when I run it in SSR (inside Tanstack Start / Vite / Vinxi) I get an error saying ApolloProvider is not found, that @apollo/client is a CommonJS module, and I should do a default import.

Default imports and everything else I could find did not work.

The solution here looks very plausible but didn’t have any visible effect.


Solution

  • The right thing to do, as the linked solution says, is add:

        ssr: {
          noExternal: ["@apollo/client"],
        }
    

    to the config file. The missing insight is that vite.config.ts is no longer the config file to use (I don't know if it does anything at all now). Instead make the change in app.config.ts like this:

    import { defineConfig } from "@tanstack/react-start/config";
    import tsConfigPaths from "vite-tsconfig-paths";
    
    export default defineConfig({
     ...
      vite: {
        ...
        ssr: {
          noExternal: ["@apollo/client"],
        },
      },
    });