How to use react-strict-dom with Vite ? ( and TanStack Start)

[Dovakeidy]

Hi!

I'm trying to use react-strict-dom with Vite (and TanStack Start, to be precise).

I've seen multiple issues on this topic, but none of them solve the problem:

Related issues:
Issue #265
Issue #273

I'm getting the same error as in those issues:

Error: Unexpected 'stylex.create' call at runtime. Styles must be compiled by '@stylexjs/babel-plugin'.

Has anyone managed to get this working? Thanks!

CODE :

vite.config.ts:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { tanstackStart } from '@tanstack/react-start/plugin/vite'
import tsConfigPaths from 'vite-tsconfig-paths'
import babel from "vite-plugin-babel";
import path from 'path';

export default defineConfig(() => ({
  server: {
    port: 3000
  },
  plugins: [
    tsConfigPaths(),
    tanstackStart(),
    react({
      babel: {
        configFile: path.resolve(__dirname, 'babel.config.cjs')
      }
    }),
    babel({
      include: /node_modules\/react-strict-dom(-svg)?/
    })
  ],
}));

postcss.config.js:

export default {
  plugins: {
    "postcss-react-strict-dom": {
      include: [
        "node_modules/react-strict-dom/dist/dom/runtime.js",
        "src/**/*.{js,jsx,ts,tsx}"
      ],
    },
    autoprefixer: {},
  },
};

babel.config.cjs:

module.exports = {
  presets: [
    ['@babel/preset-react', { runtime: 'automatic' }],
    'react-strict-dom/babel-preset'
  ]
};

global.css:

@react-strict-dom;

[MoOx]

Here is my setup with tanstack start / Vite & storybook

vite.config.js

import { tanstackStart } from "@tanstack/react-start/plugin/vite";
import viteReact from "@vitejs/plugin-react";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig({
  server: {
    port: 3447,
  },
  plugins: [
    tsconfigPaths(),
    tanstackStart({
      srcDirectory: ".",
      router: {
        routesDirectory: "routes",
      },
    }),
    // react's vite plugin must come after start's vite plugin
    viteReact({
      babel: { configFile: true },
      exclude: [/\/node_modules\/(?!react-strict-dom)/],
    }),
  ],
  ssr: {
    noExternal: ["react-strict-dom"],
  },
  optimizeDeps: {
    exclude: ["react-strict-dom"],
  },
});

babelconfig.js

const dev = process.env.NODE_ENV !== "production";

const config = {
  parserOpts: {
    plugins: ["typescript", "jsx"],
  },
  plugins: [
    // Plugin to strip Vite's ?v=hash from filenames before react-strict-dom processes them
    // otherwise we get react hydration mismatches due to different data-style-src values
    function stripViteVersionFromFilename() {
      return {
        // Normalize filename by removing Vite's version query params
        pre(file) {
          if (file.opts.filename) {
            file.opts.filename = file.opts.filename.split("?")[0];
          }
        },
      };
    },
  ],
  presets: [
    [
      "react-strict-dom/babel-preset",
      {
        debug: dev,
        dev,
        platform: "web",
        rootDir: process.cwd(),
      },
    ],
  ],
};

export default config;

postcss.config.mjs

const config = {
  plugins: {
    "react-strict-dom/postcss-plugin": {
      include: ["**/*.{js,jsx,ts,tsx}"],
      useLayers: true,
    },
  },
};

export default config;

.storybook/main.ts (rely on vite.config.ts)

import { defineMain } from "@storybook/react-vite/node";

export default defineMain({
  stories: [
    "../@(app|components|styles|svgs)/**/*.mdx",
    "../@(app|components|styles|svgs)/**/*.stories.@(js|jsx|mjs|ts|tsx)",
  ],
  staticDirs: [
    { from: "../public/images", to: "images" },
    { from: "../public/fonts", to: "fonts" },
  ],
  typescript: {
    reactDocgen: "react-docgen-typescript",
  },
  addons: ["@storybook/addon-docs", "@storybook/addon-themes"],
  framework: "@storybook/react-vite",
  // vite config automatically merged in from vite.config.ts
});

[Dovakeidy]

Thanks for the reply!
Unfortunately, I can’t get it to work using the same configuration…

With the setup I sent yesterday, I am able to get things running, but I have two issues:

1. A hydration mismatch problem

2. The error: Error: Unexpected 'stylex.create' call at runtime. Styles must be compiled by '@stylexjs/babel-plugin'.

However, I noticed that this error comes from the stylex.create used internally by react-strict-dom in the runtime.js file — not from the one I’m using myself.

Do you have a working repo or CodeSandbox of your solution?

Thanks!

---

EDIT 1:

I got rid of the stylex.create call at runtime error (But I still have the hydration error, might not be related to RSD at all). with:

ssr: {
  noExternal: ["react-strict-dom"],
},

However if I add:

optimizeDeps: {
  exclude: ["react-strict-dom"],
},

Nothing works — I get the same errors, but this time I also get the “Unexpected 'stylex.create'” error coming from my own code, as well as the one from RSD. Interesting.

[MoOx]

I was having the exact same issue on rsd runtime file, so be sure to clean vite cache every time you change the config.
I had a hard time ending up with the config I just posted but it's working on 2 similar projects so be sure to clean cache.

I don't have any public repo to share atm and won't have time until next week.

[MoOx]

The thing is: rsd runtime is doing a call to stylex.create for some default styles, so it must be not optimized so babel plugin can run on it as well as your project files.
Hydratation issues I was getting where due to a ?v= parameters in data-style-src, and fixed by the dummy babel plugin in the config I posted, and maybe by the "ssr" thing as well (sorry I don't remember fully).

[Dovakeidy]

I still have my hydration error ( and it doesn’t seem related to RSD at all, because even if I remove RSD entirely and just return a simple "div" the error still happens). However, I had another issue: my CSS was only being applied on the client side and not on the initial SSR render.

I'm putting this here in case it helps others. I was simply importing my CSS file (with the @react-strict-dom directive) inside my __root.tsx:

import '../global.css';

To fix the issue, you just need to import the CSS file as a URL and include it in your CSS elements:

import appCss from '../global.css?url';

export const Route = createRootRoute({
  head: () => ({
    meta: [
      {
        charSet: 'utf-8',
      },
      {
        name: 'viewport',
        content: 'width=device-width, initial-scale=1',
      },
      {
        title: 'TanStack Start Starter',
      },
    ],
    links: [{ rel: 'stylesheet', href: appCss }],
  }),
  component: RootComponent,
})

[Dovakeidy]

Okay, I just found out that the hydration issue was actually caused by my Chrome extensions!

By going to:

chrome://flags/#extensions-menu-access-control

I was able to enable the toggle that lets you disable all extensions for localhost:3000.

[Dovakeidy]

Here is my configuration, which works without errors (it’s a demo project, so there’s no advanced use of RSD / StyleX), but it might be useful for some people!

NOTE: If you're experiencing a hydration issue, it might be caused by your Chrome extensions (see my previous comment)._

vite.config.ts:

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

export default defineConfig(() => ({
  server: {
    port: 3000
  },
  ssr: {
    noExternal: ["react-strict-dom"],
  },
  plugins: [
    tsConfigPaths(),
    tanstackStart(),
    react({
      babel: {
        configFile: true,
      }
    }),
    babel(),
  ],
}));

babel.config.js:
(NOTE: The plugin that strips the Vite version from the filename doesn't seem useful for now, but I'll leave it there just in case.)

const dev = process.env.NODE_ENV !== "production";

export default {
  parserOpts: {
    plugins: ["typescript", "jsx"],
  },
   plugins: [
    // Plugin to strip Vite's ?v=hash from filenames before react-strict-dom processes them
    // otherwise we get react hydration mismatches due to different data-style-src values
    function stripViteVersionFromFilename() {
      return {
        // Normalize filename by removing Vite's version query params
        pre(file) {
          if (file.opts.filename) {
            file.opts.filename = file.opts.filename.split("?")[0];
          }
        },
      };
    },
  ],
  presets: [
    [
      'react-strict-dom/babel-preset',
      {
        debug: dev,
        dev,
        rootDir: process.cwd(),
        platform: "web"
      },
    ],
  ]
};

postcss.config.js:

export default {
  plugins: {
    "react-strict-dom/postcss-plugin": {
      include: ["**/*.{js,jsx,ts,tsx}"],
      useLayers: true,
    },
  },
};

global.css:

@react-strict-dom;

__root.tsx:

import appCss from '../global.css?url';

export const Route = createRootRoute({
  head: () => ({
    meta: [
      {
        charSet: 'utf-8',
      },
      {
        name: 'viewport',
        content: 'width=device-width, initial-scale=1',
      },
      {
        title: 'TanStack Start Starter',
      },
    ],
    links: [{ rel: 'stylesheet', href: appCss }],
  }),
  component: RootComponent,
})

package.json:

{
  "name": "tanstack-start-stylex-demo",
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite dev",
    "build": "vite build",
    "start": "vite preview",
    "typecheck": "tsc --noEmit"
  },
  "dependencies": {
    "@tanstack/react-start": "^1.139.12",
    "react": "^19.2.0",
    "react-dom": "^19.2.0",
    "react-strict-dom": "^0.0.54",
    "vite-plugin-babel": "^1.3.2"
  },
  "devDependencies": {
    "@tanstack/router-plugin": "^1.139.14",
    "@types/node": "^24.10.1",
    "@types/react": "^19.2.7",
    "@types/react-dom": "^19.2.3",
    "@vitejs/plugin-react": "^4.7.0",
    "autoprefixer": "^10.4.22",
    "typescript": "^5.9.3",
    "vite": "^7.2.6",
    "vite-tsconfig-paths": "^5.1.4"
  }
}