use-query-params: TypeError: Object(...) is not a function

Hi!

I installed the package use-query-params: 1.1.7 but I’m getting this error When I used setQuery In react with ts, any sugestion?

App.tsx

import { BrowserRouter, Route } from 'react-router-dom';
import { QueryParamProvider } from 'use-query-params';

const App = (): React.ReactElement => {
  return (
    <BrowserRouter>
      <QueryParamProvider ReactRouterRoute={Route}>
        ...
      </QueryParamProvider>
    </BrowserRouter>
  );
})

index.tsx

import { useQueryParams, StringParam } from 'use-query-params';

const Test = (): React.ReactElement => {
  const [query, setQuery] = useQueryParams({
    foo: StringParam,
  });
  const { foo } = query;

  return (
    <button onClick={() => setQuery({ foo: 'test!' })}>Test</button>
  )
};

I used

"use-query-params": "1.1.7",
"query-string": "6.13.2",

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 4
Comments: 15 (6 by maintainers)

Commits related to this issue

Add check for missing QueryParamProvider #103, update serialize-query-params #127 — committed to pbeshai/use-query-params by pbeshai 4 years ago

Most upvoted comments

Getting this issue in ^1.2.0 @pbeshai

Problem only appears in productions builds in CRA

Fixed with installing query-string

braco on Mar 2, 2021

Is there any reason that you actually need to allow it to depend on v6? I suspect the reason you are getting the wrong one is that when you installed initially it didn’t have any query-string available, so it installed the latest v6 as that is the latest version that met the spec. When you then installed 5.1.1 it saw that 6 was already installed, so it didn’t bother to change the one that use-query-params was using, because the one it had available met the requirements.

It will probably work if you remove your node_modules directory and yarn.lock and run yarn with version 5 already specified in your package.json, because then it will do the resolving before downloading anything.

However, looking quickly through your code it doesn’t appear you are using anything from query-string that would make it important to use v6, so overall you would be much better off by just declaring your dependency on ^5.1.1 and not worrying about 6 until after IE11 is EOL.

Alternately, if you are really adamant about keeping v6 in the dependency you could leave it as a peer dependency and just add something to detect the situation and throw a more useful error message…

Something like:

const satisfies = require( 'semver/functions/satisfies' );
const want = '^5.1.1 || ^6';
const have = require( 'query-string/package.json' ).version;

if ( ! satisfies( have, want ) ) throw new Error( `Need query-string ${want}, but found ${have}` );

You could also try something like https://www.npmjs.com/package/install-peerdeps to install peer dependencies automatically, but I’ve found that often leads to even weirder problems.

jasonk on Sep 17, 2020