Identifier '__vite__injectQuery' has already been declared error

[indramal]

I got this error in browser console. Error is Identifier '__vite__injectQuery' has already been declared error.

These are steps I did,

Step 1 - Installed this - npm install react-router-devtools -D
Step 2 - Added to vite config file in first place - reactRouterDevTools(),
Step 3 - Add this tool with Tanstack devtool

<TanStackDevtools
                        plugins={[
                          {
                            name: "React Router Devtools",
                            render: <EmbeddedDevTools />,
                            defaultOpen: true,
                          },
                          {
                            name: "TanStack Form",
                            render: <FormDevtoolsPanel />,
                          },
                        ]}
                        eventBusConfig={{
                          connectToServerBus: true,
                        }}
                      />

But I got that error. When I remove <EmbeddedDevTools /> in TanStackDevtools code. My app work fine.

[AlemTuzlak]

You need to define a folder called plugins and add a form devtools plugin in there, look at this example:
https://github.com/forge-42/react-router-devtools/blob/main/plugins/tailwind-palette/tailwind-palette.tsx#L238
Then you add this to your vite config:
https://react-router-devtools.forge42.dev/main/guides/plugins
and it should work, these devtools are a wrapper around tanstack devtools so you're effectively running them twice with this approach

[indramal]

I still get same error message.

I created new file with below code:

import { FormDevtoolsPanel } from "@tanstack/react-form-devtools";

export const tanstackFormPlugin = {
  name: "TanStack Form",
  id: "tanstack-form",
  render: <FormDevtoolsPanel />,
};

Then I added to vite,

export default defineConfig(({ mode }) => ({
  plugins: [
    reactRouterDevTools({
      pluginDir: "./src/components/utils/plugins",
    }),
    react(),
    tailwindcss(),

And I remove Tanstack form panel in

<TanStackDevtools
                        // eslint-disable-next-line react-perf/jsx-no-new-array-as-prop
                        plugins={[
                          {
                            name: "React Router Devtools",
                            render: <EmbeddedDevTools />,
                            defaultOpen: true,
                          },
                          // {
                          //   name: "TanStack Form",
                          //   render: <FormDevtoolsPanel />,
                          // },
                        ]}
                        // eslint-disable-next-line react-perf/jsx-no-new-object-as-prop
                        eventBusConfig={{
                          connectToServerBus: true,
                        }}
                      />

[AlemTuzlak]

you need to completely remove both the TanStackDevtools component and the vite plugin

[indramal]

you need to completely remove both the TanStackDevtools component and the vite plugin

I did not add tanstackdevtool in vite config file, What do you mean remove TanStackDevtools component? when I remove it, how can i see devtool in ui?

import path from "node:path";

import tailwindcss from "@tailwindcss/vite";
import react from "@vitejs/plugin-react";
import { reactRouterDevTools } from "react-router-devtools";
import { visualizer } from "rollup-plugin-visualizer";
import { defineConfig } from "vite";

// https://vite.dev/config/
export default defineConfig(({ mode }) => ({
  plugins: [
    reactRouterDevTools({
      pluginDir: "./src/components/utils/plugins",
    }),
    react(),
    tailwindcss(),
  ],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
  optimizeDeps: {
    exclude: ["lightningcss"],
  },
  build: {
    outDir: "../build", // Build into server/dist
    minify: true,
    manifest: true, // Generate manifest.json
    emptyOutDir: true, // Force empty outDir even if outside root
    sourcemap: mode === "analyze", // Need for analysis
    rollupOptions: {
      input: path.resolve(__dirname, "index.html"),
    },
  },
  base: "/",
}));

Do you mean to remove this? Then I can not see anything. App work fine but no devtool.

<TanStackDevtools
                        // eslint-disable-next-line react-perf/jsx-no-new-array-as-prop
                        plugins={[
                          {
                            name: "React Router Devtools",
                            render: <EmbeddedDevTools />,
                            defaultOpen: true,
                          },
                          // {
                          //   name: "TanStack Form",
                          //   render: <FormDevtoolsPanel />,
                          // },
                        ]}
                        // eslint-disable-next-line react-perf/jsx-no-new-object-as-prop
                        eventBusConfig={{
                          connectToServerBus: true,
                        }}
                      />

[AlemTuzlak]

wait are you using react-router framework mode? or declarative?

[indramal]

Declarative Mode

[indramal]

When I return only this devtool, then also i got same issue.

return (
    <TanStackDevtools
      // eslint-disable-next-line react-perf/jsx-no-new-array-as-prop
      plugins={[
        {
          name: "React Router Devtools",
          render: <EmbeddedDevTools />,
          defaultOpen: true,
        },
      ]}
      // eslint-disable-next-line react-perf/jsx-no-new-object-as-prop
      eventBusConfig={{
        connectToServerBus: true,
      }}
    />
  );

[AlemTuzlak]

ahh okay sorry i thought it was framework, then you just need this:

<TanStackDevtools
                        plugins={[
                          {
                            name: "React Router Devtools",
                            render: <EmbeddedDevTools />,
                            defaultOpen: true,
                          },
                          {
                            name: "TanStack Form",
                            render: <FormDevtoolsPanel />,
                          },
                        ]} 
                      />

WITHOUT the vite plugin, then it should work, if not then there is indeed a bug

[indramal]

I removed in vite config,

import path from "node:path";

import tailwindcss from "@tailwindcss/vite";
import react from "@vitejs/plugin-react";
import { visualizer } from "rollup-plugin-visualizer";
import { defineConfig } from "vite";

// https://vite.dev/config/
export default defineConfig(({ mode }) => ({
  plugins: [
    react(),
    tailwindcss(),

Also I added devtool

<TanStackDevtools
                        // eslint-disable-next-line react-perf/jsx-no-new-array-as-prop
                        plugins={[
                          {
                            name: "React Router Devtools",
                            render: <EmbeddedDevTools />,
                            defaultOpen: true,
                          },
                          {
                            name: "TanStack Form",
                            render: <FormDevtoolsPanel />,
                          },
                        ]}
                        // eslint-disable-next-line react-perf/jsx-no-new-object-as-prop
                        eventBusConfig={{
                          connectToServerBus: true,
                        }}
                      />

I got same issue. Issue is ${mod.id}:30883 Uncaught SyntaxError: Identifier '__vite__injectQuery' has already been declared (at ${mod.id}:30883:1)

function __vite__injectQuery(url$3, queryToInject) {
  if (url$3[0] !== "." && url$3[0] !== "/") return url$3;
  const pathname = url$3.replace(/[?#].*$/, "");
  const { search, hash: hash$1 } = new URL(url$3, "http://vite.dev");
  return `${pathname}?${queryToInject}${search ? `&` + search.slice(1) : ""}${hash$1 || ""}`;
}

[AlemTuzlak]

if you completely remove the devtools the error goes away? is it possible to create a minimum repro? this doesn't even sound like a devtools error, I've never seen or used anything from vite that relies on __vite__injectQuery, it's super weird

[indramal]

This is the minimum repo - https://github.com/indramal/react_router_devtool_test

Step 1 - I run npx create-vite@latest and install react typescript.
Step 2 - Install react router npm i react-router
Step 3 - Change main.tsx file code. Wrap with <BrowserRouter>
Step 4 - Install this react router devtool and tanstack devtool.
Step 5 - Add to main.tsx file.
Step 6 - Run dev mode then got below error.

I got below error and then I installed npm install -D vite-node package. Then get same error Uncaught SyntaxError: Identifier '__vite__injectQuery' has already been declared (at ${mod.id}:30984:1)

✘ [ERROR] Could not resolve "vite-node/client"

    node_modules/react-router-devtools/dist/index.js:14:31:
      14 │ import { ViteNodeRunner } from "vite-node/client";
         ╵                                ~~~~~~~~~~~~~~~~~~

  You can mark the path "vite-node/client" as external to exclude it from the bundle, which will
  remove this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "vite-node/server"

    node_modules/react-router-devtools/dist/index.js:15:31:
      15 │ import { ViteNodeServer } from "vite-node/server";
         ╵                                ~~~~~~~~~~~~~~~~~~

  You can mark the path "vite-node/server" as external to exclude it from the bundle, which will
  remove this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "vite-node/source-map"

    node_modules/react-router-devtools/dist/index.js:16:41:
      16 │ import { installSourcemapsSupport } from "vite-node/source-map";
         ╵                                          ~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "vite-node/source-map" as external to exclude it from the bundle, which will
  remove this error and leave the unresolved path in the bundle.

/home/ihackerubuntu/ProjectFiles/reactjs_test/react_router_devtool_test/node_modules/esbuild/lib/main.js:1467
  let error = new Error(text);
              ^

Error: Error during dependency optimization:

✘ [ERROR] Could not resolve "vite-node/client"

    node_modules/react-router-devtools/dist/index.js:14:31:
      14 │ import { ViteNodeRunner } from "vite-node/client";
         ╵                                ~~~~~~~~~~~~~~~~~~

  You can mark the path "vite-node/client" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.


✘ [ERROR] Could not resolve "vite-node/server"

    node_modules/react-router-devtools/dist/index.js:15:31:
      15 │ import { ViteNodeServer } from "vite-node/server";
         ╵                                ~~~~~~~~~~~~~~~~~~

  You can mark the path "vite-node/server" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.


✘ [ERROR] Could not resolve "vite-node/source-map"

    node_modules/react-router-devtools/dist/index.js:16:41:
      16 │ import { installSourcemapsSupport } from "vite-node/source-map";
         ╵                                          ~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "vite-node/source-map" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.


    at failureErrorWithLog (/home/ihackerubuntu/ProjectFiles/reactjs_test/react_router_devtool_test/node_modules/esbuild/lib/main.js:1467:15)
    at /home/ihackerubuntu/ProjectFiles/reactjs_test/react_router_devtool_test/node_modules/esbuild/lib/main.js:926:25
    at /home/ihackerubuntu/ProjectFiles/reactjs_test/react_router_devtool_test/node_modules/esbuild/lib/main.js:1345:9
    at process.processTicksAndRejections (node:internal/process/task_queues:103:5) {
  errors: [Getter/Setter],
  warnings: [Getter/Setter]
}

Node.js v25.1.0

[indramal]

Any solution?