T
TanStack•2mo ago
fascinating-indigo

having a bug when hosting Tanstack Start on a VPS

I’ve got a TanStack project running on an AWS Lightsail VPS. The site loads fine when navigating around normally. However, when I reload a page that uses a route loader with an external API endpoint (instead of createServerFn), I get this error: 
Unable to connect. Is the computer able to access the URL?
Unable to connect. Is the computer able to access the URL?
I’ve attached a video showing exactly what’s happening (which is what happens on the site). The external endpoints themselves are working fine, it only fails on page reload. this is the error in the console 
Error: Unable to connect. Is the computer able to access the url?
    at main-BaMLvDPr.js:50:84424
    at Object.parse (main-BaMLvDPr.js:50:84188)
    at Object.<anonymous> (main-BaMLvDPr.js:50:83614)
    at JSON.parse (<anonymous>)
    at Object.parse (main-BaMLvDPr.js:50:83512)
    at main-BaMLvDPr.js:50:85646
    at Array.forEach (<anonymous>)
    at xB (main-BaMLvDPr.js:50:85347)
    at E9 (main-BaMLvDPr.js:68:10101)
    at cb (main-BaMLvDPr.js:49:34204)
Error: Unable to connect. Is the computer able to access the url?
    at main-BaMLvDPr.js:50:84424
    at Object.parse (main-BaMLvDPr.js:50:84188)
    at Object.<anonymous> (main-BaMLvDPr.js:50:83614)
    at JSON.parse (<anonymous>)
    at Object.parse (main-BaMLvDPr.js:50:83512)
    at main-BaMLvDPr.js:50:85646
    at Array.forEach (<anonymous>)
    at xB (main-BaMLvDPr.js:50:85347)
    at E9 (main-BaMLvDPr.js:68:10101)
    at cb (main-BaMLvDPr.js:49:34204)
in the sidebar the I am loading perferctly fine, I am using useQuery(userMeQueryOptions()); this is my vite.config.ts 
import tailwindcss from "@tailwindcss/vite";
import { tanstackStart } from "@tanstack/react-start/plugin/vite";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig({
  plugins: [
    tsconfigPaths({
      projects: ["./tsconfig.json"],
    }),
    tailwindcss(),
    tanstackStart({
      react: {
        babel: {
          plugins: [
            [
              "babel-plugin-react-compiler",
              {
                target: "19",
              },
            ],
          ],
        },
      },
      target: "bun",
    }),
  ],
  // TODO: clerk issue https://github.com/TanStack/router/issues/4409
  ssr: {
    noExternal: ["@clerk/tanstack-react-start"],
  },
});
import tailwindcss from "@tailwindcss/vite";
import { tanstackStart } from "@tanstack/react-start/plugin/vite";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig({
  plugins: [
    tsconfigPaths({
      projects: ["./tsconfig.json"],
    }),
    tailwindcss(),
    tanstackStart({
      react: {
        babel: {
          plugins: [
            [
              "babel-plugin-react-compiler",
              {
                target: "19",
              },
            ],
          ],
        },
      },
      target: "bun",
    }),
  ],
  // TODO: clerk issue https://github.com/TanStack/router/issues/4409
  ssr: {
    noExternal: ["@clerk/tanstack-react-start"],
  },
});
Any ideas?
1 Reply
adverse-sapphire
adverse-sapphire•2mo ago
not 100% sure but this might have to do with target: bun for some reason, only in a prod docker image, when targetting bun, the first load would work fine, but subsequent reloads wouldnt work targetting node instead made it work fine

Did you find this page helpful?