dependent-tan

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

dependent-tanOP•3mo ago

No errors outputed in the console

correct-apricot•3mo ago

what would expect to happen?

dependent-tanOP•3mo 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

stormy-gold•3mo 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

dependent-tanOP•3mo ago

Oh thank you! I’ll check later when im back on it

Gaming

Programming

React Compiler with TSS

Did you find this page helpful?