deep-jade

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

deep-jadeOP•3mo 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
    </>
  );
}

adverse-sapphire•3mo ago

I'm guessing it's not hydrating on the client for some reason

deep-jadeOP•3mo 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?

extended-salmon•3mo ago

can you share a complete reproducer as a git repo?

rare-sapphire•3mo 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.

Gaming

Programming

Cannot render client side code

Did you find this page helpful?