TypeError: Object(...) is not a function

[KimWooHyun]

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",

[KimWooHyun]

I tried downgrade as "use-query-params": "1.1.6" And It works

[hemi823]

I tried downgrade as "use-query-params": "1.1.6" And It works

my version is 1.1.6, and it doesn't work

[hemi823]

I tried downgrade as "use-query-params": "1.1.6" And It works

my version is 1.1.6, and it doesn't work

should install query-string

[pbeshai]

oh no, this must be because the code is using parseUrl directly which is only available in some versions of query-string. I'll have to modify serialize-query-params to no longer depend on it. Will share when it's fixed. thank you

Update: hmm seems that function has been available sine 5.1.1 at least. If anyone can put a code sandbox reproducing this that'd be great, otherwise I'll try to investigate later.

[pbeshai]

I just tried to reproduce and I can't. If you can create a code sandbox reproducing this, that'd be great. I just used create-react-app typescript template with:

yarn add query-string use-query-params react-router-dom
yarn add --dev @types/react-router-dom

Then using your examples in the initial post. e.g.:

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

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

export default App;

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

  return (
    <button
      onClick={() => {
        setQuery({ foo: 'test!' + Math.random().toFixed(2) });
      }}
    >
      Test
    </button>
  );
};

[jasonk]

I just got through tracking this down in my app, and in my case the problem was a combination of serialize-query-params declaring query-string as a peerDependency, and yarn not caring about peerDependency versions (yarnpkg/yarn#4938, yarnpkg/yarn#4594, yarnpkg/yarn#4850) so I ended up with query-string@4.3.4.

IMO, the right fix for this would be for serialize-query-params to just list query-string as a dependency with a version restriction. This is how dependencies work, and there isn't any reason for this to be a peerDependency (see https://nodejs.org/es/blog/npm/peer-dependencies/ for some discussion of when you would need a peerDependency).

[pbeshai]

Hi @jasonk, thank you for digging in to this and sorry for the trouble it's caused. The problem with making it a dependency is that v6 breaks IE11 support I believe (see #15). The library works with these versions (as specified in serialize-query-params package.json):

  "peerDependencies": {
    "query-string": "^5.1.1 || ^6"
  }

I do not believe this is possible with a normal dependency. Am I missing something or do you see any other solutions? Would it be better if I also listed it explicitly in the use-query-params package.json (right now it doesn't list it but it depends on serialize-query-params that does list it)?

[jasonk]

The versions that can be specified in regular dependencies are exactly the same as peerDependencies (and devDependencies), so you could definitely just turn that into a regular dependency and it would work pretty much exactly the same way - except that if query-string were missing you would get version 6 installed by default (and the developer could still manually install query-string@5 if they care about IE11).

You could also argue that the dependency version is intended to ensure that you get a version that will work with the library. If you aren't losing anything by using v5 over v6 you could just declare a dependency on ^5.1.1 and it would work and be IE11 compatible all the time. In the event that the developer also installs query-string on their own then the app could end up with two different versions of query-string installed at the same time. Since it uses no global state or anything else that could cause problems by being installed twice, this isn't really an issue (it's also something that happens all the time and things like compression and tree-shaking help to minimize the impact that it has).

The only case where you really need peer dependencies is when you depend on something that does have global state, that won't work correctly if there are two different versions included at the same time (things like React)..

[pbeshai]

Thanks for the info, I wasn't aware you could specify multiple versions as straight up dependencies, that seems like a good solution.

I had previously downgraded it to v5 (pbeshai/serialize-query-params#2), but it was requested to work with v6 (pbeshai/serialize-query-params#4) so here we are. The v5 version that is supported is currently 2.5yrs old while the latest v6 was just released a couple of days ago and has support for more options and use cases. We do allow users to provide stringify options directly to the query-string version used by the library so I think it's best to keep the flexibility of having both even if it produces occasional headaches.

Again, thank you for your detailed write up! I'll give it a shot and if it all checks out, I'll update the library.

[pbeshai]

Hmm, when I try to have this work locally, I am unable to get serialize-query-params to use the project installed query-string if it is listed as a dependency.

Steps I followed:

• Switch query-string to being a dependency for serialize-query-params:

  "dependencies": {
    "query-string": "^5.1.1 || ^6"
  }

• Make query-string@5.1.1 a dependency of my CRA project "uqp-127"

yarn add query-string@5.1.1

• Use the local linked versions of use-query-params and serialize-query-params

This results in the following query-strings installed:

$ npm ls query-string
uqp-127@0.1.0 /tmp/uqp-127
├── query-string@5.1.1
├─┬ react-scripts@3.4.3
│ └─┬ mini-css-extract-plugin@0.9.0
│   └─┬ normalize-url@1.9.1
│     └── query-string@4.3.4
└─┬ use-query-params@1.1.7 -> /tmp/use-query-params
  └─┬ serialize-query-params@1.2.2
    └── query-string@6.13.2

And when I interact with the example, I see in the console (after adding some logging to query-string code in node_modules):

v6 loaded
5.1.1 loaded
parseUrl for v6 called

So it seems the app ends up using the v6 version. Note this was all done via yarn.

For reference, a currently working project shows the following when I do npm ls query-string:

$ npm ls query-string
npm ls query-string
project@0.0.1 /project
├─┬ react-scripts@3.4.3
│ └─┬ mini-css-extract-plugin@0.9.0
│   └─┬ normalize-url@1.9.1
│     └── query-string@4.3.4
└── query-string@6.12.1

Which to me seems clear that it would work with v5 as well if I had chosen to install it instead of 6 as a direct dependency for the project.

Have I missed a step to get serialize-query-params to use the project installed version of query-string? If not, perhaps a reasonable solution is to perform a check in dev and show an error message if expected functionality from query-string is missing.

[jasonk]

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.