T
TanStack•6mo ago
fascinating-indigo

Cannot render client side code

After migrating to devinxi I am having a problem where everything is being serverside rendered. So no console.logs, button interactions etc are working. As the migration guide suggested, i deleted both server.tsx and client.tsx files Am I missing something? Here is my vite.config.mjs 
import tailwindcss from "@tailwindcss/vite";
import { tanstackStart } from '@tanstack/react-start/plugin/vite'
import tsConfigPaths from "vite-tsconfig-paths";
import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    port: 3000
  },
  plugins: [
    tsConfigPaths({
      projects: ["./tsconfig.json"],
    }),
    tailwindcss(),
     tanstackStart({
      target: "bun",
    }),
  ],
});
import tailwindcss from "@tailwindcss/vite";
import { tanstackStart } from '@tanstack/react-start/plugin/vite'
import tsConfigPaths from "vite-tsconfig-paths";
import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    port: 3000
  },
  plugins: [
    tsConfigPaths({
      projects: ["./tsconfig.json"],
    }),
    tailwindcss(),
     tanstackStart({
      target: "bun",
    }),
  ],
});
5 Replies
fascinating-indigo
fascinating-indigoOP•6mo ago
Heres an example, the console log in useEffect never runs 
import { buttonVariants } from "src/components/ui/button";
import { Link, createFileRoute } from "@tanstack/react-router";
import React from "react";

export const Route = createFileRoute("/_root/")({
  component: LandingPage,
});

function LandingPage() {
  console.log("This runs in the server");
  React.useEffect(() => {
    console.log("This never runs");
  }, [])

  return (
    <>
      hello
    </>
  );
}
import { buttonVariants } from "src/components/ui/button";
import { Link, createFileRoute } from "@tanstack/react-router";
import React from "react";

export const Route = createFileRoute("/_root/")({
  component: LandingPage,
});

function LandingPage() {
  console.log("This runs in the server");
  React.useEffect(() => {
    console.log("This never runs");
  }, [])

  return (
    <>
      hello
    </>
  );
}
correct-apricot
correct-apricot•6mo ago
I'm guessing it's not hydrating on the client for some reason
fascinating-indigo
fascinating-indigoOP•6mo ago
I havent seen anyone else with this same issue, I'll try make a min reproduction of it do you know if there is any config i can play with to try get hydration working again?
afraid-scarlet
afraid-scarlet•6mo ago
can you share a complete reproducer as a git repo?
stormy-gold
stormy-gold•6mo ago
I had this same issue, accompanied with various other errors related to this, and I spent the bulk of today fixing it in my application, For me, I guessed from other errors I'd encountered with start previously that I might've been leaking server code to the client. I went over all my server code and found that I'd refactored some auth related stuff (things that use h3 cookie functions, for example) and forgot to turn things into serverFns properly. For good measure, I also separated all the createServerFn function definitions into separate files. This cleared the issue for me, and my application both renders client-side code properly again, and it actually builds, too.

Did you find this page helpful?