ReactRouter6Adapter has a missing dependency

[Frank Hampus Weslien]

What I am trying to do

I want to load the library and use it with react-router-dom

What I expect to happen

That I can load the library.

What actually happens

vite throws an error because "react-router-dom" is missing

✘ [ERROR] Could not resolve "react-router-dom"

    ../node_modules/use-query-params/adapters/react-router-6/index.js:2:67:
      2 │ import { UNSAFE_NavigationContext, useNavigate, useLocation } from "react-router-dom";
        ╵                                                                    ~~~~~~~~~~~~~~~~~~

  You can mark the path "react-router-dom" as external to exclude it from the bundle, which will
  remove this error.

main.tsx:

import React from "react";
import "./main.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { ChakraProvider } from "@chakra-ui/react";
import { BrowserRouter } from "react-router-dom";
import { ColorModeScript } from "@chakra-ui/react";
import Theme from "./Theme";
// @ts-ignore
import { registerSW } from "virtual:pwa-register";
import { createRoot } from "react-dom/client";
// Do not remove this import, it initalizes firebase
import * as Firebase from "./Firebase"; // DO NOT REMOVE
import { QueryParamProvider } from "use-query-params";
import { ReactRouter6Adapter } from "use-query-params/adapters/react-router-6";

const container = document.getElementById("root");
const root = createRoot(container!);
root.render(
  <>
    <ColorModeScript initialColorMode={Theme.config.initialColorMode} />
    <BrowserRouter>
      <QueryParamProvider adapter={ReactRouter6Adapter}>
        <React.StrictMode>
          <ChakraProvider theme={Theme}>
            <App />
          </ChakraProvider>
        </React.StrictMode>
      </QueryParamProvider>
    </BrowserRouter>
  </>
);

reportWebVitals();

const updateSW = registerSW();

Additional information

• my react-router-dom version: v6.6.1

[Monstrel]

I am encountering this issue today as well, trying to use use-query-params in a project bundled with Yarn.

I'd suggest the issue is that nested package.json files are not valid outside of a workspace scenario. I think Yarn is treating use-query-params/adapters/react-router-6 as a package unto itself which does not declare any dependencies so it must externalize the dependency.

[Frank Hampus Weslien]

To me, it would make the most sense if each adapter were its own package. I was surprised by that not being the case.

[Taron Lu]

You need to upgrade react router. It is working as of latest version 6.8.1

[Damian Osipiuk]

For anyone encountering this error, if you are using pnpm, you can fix this issue by adding following to your package.json:

"pnpm": {
  "packageExtensions": {
    "use-query-params@2.2.0": {
      "peerDependencies": {
        "react-router-dom": ">= 5"
      },
      "peerDependenciesMeta": {
        "react-router-dom": {
          "optional": true
        }
      }
    }
  }
}

I will try to prepare PR fixing this for everyone.