react router framework conflict with @vitejs/plugin-react

[mosmosbosbos]

I'm using React Router as a...

library

Reproduction

when ever i try to use @vitejs/plugin-react with react router like this example

import { reactRouter } from "@react-router/dev/vite";
import autoprefixer from "autoprefixer";
import tailwindcss from "tailwindcss";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";
import Unimport from 'unimport/unplugin'
import { lingui } from "@lingui/vite-plugin";
import react from "@vitejs/plugin-react";

export default defineConfig({
  css: {
    postcss: {
      plugins: [tailwindcss, autoprefixer],
    },
  },
  plugins: [
    lingui(),
    react(),
    // react({
    //   babel: {
    //     plugins: [["babel-plugin-react-compiler"]],
    //   },
    // }),
    reactRouter(),
    tsconfigPaths(),
    Unimport.vite({
      presets: ['react', 'react-router'],
      dts: true,
      dirs:['./app/components/ui/**','./app/components/**'],
    })
  ],
});

it shows this in the browser console Uncaught SyntaxError: Identifier 'RefreshRuntime' has already been declared (at root.tsx:4:1)

System Info

System:
    OS: Windows 11 10.0.26100
    CPU: (32) x64 Intel(R) Core(TM) i9-14900HX
    Memory: 10.43 GB / 31.73 GB
  Binaries:
    Node: 20.10.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.22 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 10.9.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.15.1 - ~\AppData\Roaming\npm\pnpm.CMD
  Browsers:
    Edge: Chromium (131.0.2903.146)
    Internet Explorer: 11.0.26100.1882
  npmPackages:
    @react-router/dev: ^7.1.3 => 7.1.3
    @react-router/fs-routes: ^7.1.3 => 7.1.3
    @react-router/node: ^7.1.3 => 7.1.3
    @react-router/serve: ^7.1.3 => 7.1.3
    react-router: ^7.1.3 => 7.1.3
    vite: ^5.4.11 => 5.4.14

Used Package Manager

pnpm

Expected Behavior

not showing the error

Actual Behavior

when ever i try to use @vitejs/plugin-react with react router like this example

import { reactRouter } from "@react-router/dev/vite";
import autoprefixer from "autoprefixer";
import tailwindcss from "tailwindcss";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";
import Unimport from 'unimport/unplugin'
import { lingui } from "@lingui/vite-plugin";
import react from "@vitejs/plugin-react";

export default defineConfig({
  css: {
    postcss: {
      plugins: [tailwindcss, autoprefixer],
    },
  },
  plugins: [
    lingui(),
    react(),
    // react({
    //   babel: {
    //     plugins: [["babel-plugin-react-compiler"]],
    //   },
    // }),
    reactRouter(),
    tsconfigPaths(),
    Unimport.vite({
      presets: ['react', 'react-router'],
      dts: true,
      dirs:['./app/components/ui/**','./app/components/**'],
    })
  ],
});

it shows this in the browser console Uncaught SyntaxError: Identifier 'RefreshRuntime' has already been declared (at root.tsx:4:1)

[timdorr]

The React Router plugin already adds the same elements of the React plugin (HMR, JSX Runtime), so you shouldn't add it at the same time.

[madisvain]

There currently is no fix for this. The related thread can be found: #12352

[neochief]

Jesus, I spent 2 days figuring out why my upgrade to React Router 7 fails, and it turns out, you don't need to include the react plugin alongside with the react router plugin. You guys should put it into the upgrade from v6 doc.