eager-peach

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"],
      }),
    ],
  },
});

9 Replies

adverse-sapphire•7mo ago

what happens if you configure it like that?

eager-peachOP•7mo ago

eager-peachOP•7mo ago

I guess that register the React plugin twice Do you think it's not possible for now ?

adverse-sapphire•7mo ago

dont really know, sorry

eager-peachOP•7mo ago

Arf 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 )

adverse-sapphire•7mo ago

we are working on becoming just a vite plugin but as of now, we are not

eager-peachOP•7mo ago

oh that's nice is this planned on a roadmap or something ?

adverse-sapphire•7mo ago

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

eager-peachOP•7mo ago

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!

Gaming

Programming

How to custom React vite plugin

Did you find this page helpful?