T
TanStack•6mo ago
other-emerald

React Compiler with TSS

Hello, I'm trying to set up the new react compiler with TSS@alpha but it seems like not to have an affect. That's 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";

const ReactCompilerConfig = {
    target: "19",
};

export default defineConfig({
    ssr: {
        noExternal: ["@erquhart/convex-better-auth"],
    },
    plugins: [
        tsconfigPaths(),
        tailwindcss(),
        tanstackStart({
            react: {
                babel: {
                    plugins: [
                        ["babel-plugin-react-compiler", ReactCompilerConfig],
                    ],
                },
            },
        }),
    ],
});
import tailwindcss from "@tailwindcss/vite";
import { tanstackStart } from "@tanstack/react-start/plugin/vite";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

const ReactCompilerConfig = {
    target: "19",
};

export default defineConfig({
    ssr: {
        noExternal: ["@erquhart/convex-better-auth"],
    },
    plugins: [
        tsconfigPaths(),
        tailwindcss(),
        tanstackStart({
            react: {
                babel: {
                    plugins: [
                        ["babel-plugin-react-compiler", ReactCompilerConfig],
                    ],
                },
            },
        }),
    ],
});
Also added "babel-plugin-react-compiler": "19.1.0-rc.2"
5 Replies
other-emerald
other-emeraldOP•6mo ago
No errors outputed in the console
quickest-silver
quickest-silver•6mo ago
what would expect to happen?
other-emerald
other-emeraldOP•6mo ago
Maybe I phrased my question wrong More likely, how can I check, that it works? because with react scanner, I still see like rerenderings of sub components happening after changing non related props
flat-fuchsia
flat-fuchsia•6mo ago
an easy way to check if its working in general and in a specific component is to open the react devtools. they will show a Memo badge on all components that have compiler optimizations applied
No description
other-emerald
other-emeraldOP•6mo ago
Oh thank you! I’ll check later when im back on it

Did you find this page helpful?