How to custom React vite plugin

Hi ! I want to test react-strict-dom with TanStack start but I don't really know how to custom the react vite plugin to use StyleX + RSD babel plugin/preset.

Thanks!

import { defineConfig } from "@tanstack/react-start/config";
import tsConfigPaths from "vite-tsconfig-paths";
import react from "@vitejs/plugin-react";

export default defineConfig({
  vite: {
    plugins: [
      react({
        babel: {
          // plugins: [
          //   [
          //     "@stylexjs/babel-plugin",
          //     {
          //       dev: process.env.NODE_ENV === "development",
          //       test: process.env.NODE_ENV === "test",
          //       runtimeInjection: false,
          //       genConditionalClasses: true,
          //       treeshakeCompensation: true,
          //       unstable_moduleResolution: { type: "commonJS" },
          //     },
          //   ],
          // ],
          // presets: [
          //   // "babel-preset-expo",
          //   [
          //     "react-strict-dom/babel-preset",
          //     {
          //       debug: process.env.NODE_ENV === "development",
          //       dev: process.env.NODE_ENV === "development",
          //       platform: process.env.PLATFORM || "web",
          //     },
          //   ],
          // ],
        },
      }),
      tsConfigPaths({
        projects: ["./tsconfig.json"],
      }),
    ],
  },
});

import { defineConfig } from "@tanstack/react-start/config";
import tsConfigPaths from "vite-tsconfig-paths";
import react from "@vitejs/plugin-react";

export default defineConfig({
  vite: {
    plugins: [
      react({
        babel: {
          // plugins: [
          //   [
          //     "@stylexjs/babel-plugin",
          //     {
          //       dev: process.env.NODE_ENV === "development",
          //       test: process.env.NODE_ENV === "test",
          //       runtimeInjection: false,
          //       genConditionalClasses: true,
          //       treeshakeCompensation: true,
          //       unstable_moduleResolution: { type: "commonJS" },
          //     },
          //   ],
          // ],
          // presets: [
          //   // "babel-preset-expo",
          //   [
          //     "react-strict-dom/babel-preset",
          //     {
          //       debug: process.env.NODE_ENV === "development",
          //       dev: process.env.NODE_ENV === "development",
          //       platform: process.env.PLATFORM || "web",
          //     },
          //   ],
          // ],
        },
      }),
      tsConfigPaths({
        projects: ["./tsconfig.json"],
      }),
    ],
  },
});

import { defineConfig } from "@tanstack/react-start/config";
import tsConfigPaths from "vite-tsconfig-paths";
import react from "@vitejs/plugin-react";

export default defineConfig({
  vite: {
    plugins: [
      react({
        babel: {
          // plugins: [
          //   [
          //     "@stylexjs/babel-plugin",
          //     {
          //       dev: process.env.NODE_ENV === "development",
          //       test: process.env.NODE_ENV === "test",
          //       runtimeInjection: false,
          //       genConditionalClasses: true,
          //       treeshakeCompensation: true,
          //       unstable_moduleResolution: { type: "commonJS" },
          //     },
          //   ],
          // ],
          // presets: [
          //   // "babel-preset-expo",
          //   [
          //     "react-strict-dom/babel-preset",
          //     {
          //       debug: process.env.NODE_ENV === "development",
          //       dev: process.env.NODE_ENV === "development",
          //       platform: process.env.PLATFORM || "web",
          //     },
          //   ],
          // ],
        },
      }),
      tsConfigPaths({
        projects: ["./tsconfig.json"],
      }),
    ],
  },
});

import { defineConfig } from "@tanstack/react-start/config";
import tsConfigPaths from "vite-tsconfig-paths";
import react from "@vitejs/plugin-react";

export default defineConfig({
  vite: {
    plugins: [
      react({
        babel: {
          // plugins: [
          //   [
          //     "@stylexjs/babel-plugin",
          //     {
          //       dev: process.env.NODE_ENV === "development",
          //       test: process.env.NODE_ENV === "test",
          //       runtimeInjection: false,
          //       genConditionalClasses: true,
          //       treeshakeCompensation: true,
          //       unstable_moduleResolution: { type: "commonJS" },
          //     },
          //   ],
          // ],
          // presets: [
          //   // "babel-preset-expo",
          //   [
          //     "react-strict-dom/babel-preset",
          //     {
          //       debug: process.env.NODE_ENV === "development",
          //       dev: process.env.NODE_ENV === "development",
          //       platform: process.env.PLATFORM || "web",
          //     },
          //   ],
          // ],
        },
      }),
      tsConfigPaths({
        projects: ["./tsconfig.json"],
      }),
    ],
  },
});

still-lime•2/25/25, 11:08 PM

what happens if you configure it like that?

popular-magentaOP•2/25/25, 11:08 PM

popular-magentaOP•2/25/25, 11:09 PM

I guess that register the React plugin twice

Sstill-lime what happens if you configure it like that?

popular-magentaOP•2/25/25, 11:12 PM

Do you think it's not possible for now ?

still-lime•2/25/25, 11:12 PM

dont really know, sorry

Sstill-lime dont really know, sorry

popular-magentaOP•2/25/25, 11:13 PM

Arf

Sstill-lime dont really know, sorry

popular-magentaOP•2/25/25, 11:16 PM

Wouldn't it be the fault of tanstack start to export defineConfig rather than using vite.config directly and exporting a plugin for tanstack?

( sorry for my english )

still-lime•2/25/25, 11:17 PM

we are working on becoming just a vite plugin

still-lime•2/25/25, 11:17 PM

but as of now, we are not

popular-magentaOP•2/25/25, 11:17 PM

oh that's nice

popular-magentaOP•2/25/25, 11:17 PM

is this planned on a roadmap or something ?

still-lime•2/25/25, 11:18 PM

we currently are based on vinxi, and we are removing that to be based on vite/nitro alone

still-lime•2/25/25, 11:18 PM

ongoing effort, high prio

Sstill-lime we currently are based on vinxi, and we are removing that to be based on vite/ni...

popular-magentaOP•2/25/25, 11:19 PM

Yes, I saw that in the documentation. It's a great job, thanks for your time. I've never used Next/Remix because I don't really like their approach... But TanStack start is the right solution for me!

How to custom React vite plugin

Similar Threads

Similar Threads

Similar Threads