Error: paramsSerializer is not a function

[exipnus]

API: Places Autocomplete
OS: Ubuntu with WSL 2 (Windows 11)
Platform: next.js with Typescript
Library version: 3.3.31

import { Client } from '@googlemaps/google-maps-services-js';
import queryString from 'query-string';

import { env } from '@/env.mjs';

export const client = new Client({
  config: {
    paramsSerializer: (params) =>
      queryString.stringify(params, { arrayFormat: 'bracket' }),
  },
});

export const googleSearchPlaces = async (input: string) => {
  return await client.placeAutocomplete({
    params: {
      input: input,
      key: env.GOOGLE_MAPS_API_KEY,
    },
  });
};

I have also tried:

import { Client } from '@googlemaps/google-maps-services-js';
import queryString from 'query-string';

import { env } from '@/env.mjs';

export const client = new Client({ });

export const googleSearchPlaces = async (input: string) => {
  return await client.placeAutocomplete({
    params: {
      input: input,
      key: env.GOOGLE_MAPS_API_KEY,
    },
    paramsSerializer: (params) =>
      queryString.stringify(params, { arrayFormat: 'bracket' }),
  });
};

the error I get is:

Error: paramsSerializer is not a function
    at dispatchHttpRequest (/home/user/code/projects/my-project/web/node_modules/@googlemaps/google-maps-services-js/node_modules/axios/lib/adapters/http.js:161:23)
    at new Promise (<anonymous>)
    at Object.httpAdapter [as adapter] (/home/user/code/projects/my-project/web/node_modules/@googlemaps/google-maps-services-js/node_modules/axios/lib/adapters/http.js:49:10)
    at /home/user/code/projects/my-project/web/node_modules/@googlemaps/google-maps-services-js/dist/adapter.js:55:10
    at new Promise (<anonymous>)
    at customAdapter (/home/user/code/projects/my-project/web/node_modules/@googlemaps/google-maps-services-js/dist/adapter.js:53:35)
    at Axios.dispatchRequest (/home/user/code/projects/my-project/web/node_modules/axios/dist/node/axios.cjs:3491:10)
    at Axios.request (/home/user/code/projects/my-project/web/node_modules/axios/dist/node/axios.cjs:3847:33)
    at Function.wrap [as request] (/home/user/code/projects/my-project/web/node_modules/axios/dist/node/axios.cjs:29:15)
    at /home/user/code/projects/my-project/web/node_modules/retry-axios/dist/index.js:1:1819
    at async googleSearchPlaces (webpack-internal:///(api)/./src/server/api/googlePlaces.ts:35:12)
    at async eval (webpack-internal:///(api)/./src/server/api/routers/location.ts:21:30)
    at async resolveMiddleware (file:///home/user/code/projects/my-project/web/node_modules/@trpc/server/dist/index.mjs:416:30)
    at async callRecursive (file:///home/user/code/projects/my-project/web/node_modules/@trpc/server/dist/index.mjs:452:32)
    at async next (file:///home/user/code/projects/my-project/web/node_modules/@trpc/server/dist/index.mjs:460:32)
    at async callRecursive (file:///home/user/code/projects/my-project/web/node_modules/@trpc/server/dist/index.mjs:452:32)
    at async resolve (file:///home/user/code/projects/my-project/web/node_modules/@trpc/server/dist/index.mjs:480:24)
    at async file:///home/user/code/projects/my-project/web/node_modules/@trpc/server/dist/resolveHTTPResponse-6c8965e4.mjs:123:32
    at async Promise.all (index 0)
    at async resolveHTTPResponse (file:///home/user/code/projects/my-project/web/node_modules/@trpc/server/dist/resolveHTTPResponse-6c8965e4.mjs:120:28)
    at async file:///home/user/code/projects/my-project/web/node_modules/@trpc/server/dist/nodeHTTPRequestHandler-2718f9d8.mjs:61:24
    at async file:///home/user/code/projects/my-project/web/node_modules/@trpc/server/dist/adapters/next.mjs:39:9 {
  config: {
    transitional: {
      silentJSONParsing: true,
      forcedJSONParsing: true,
      clarifyTimeoutError: false
    },
    adapter: [Function: customAdapter],
    transformRequest: [ [Function: transformRequest] ],
    transformResponse: [ [Function: transformResponse] ],
    timeout: 10000,
    xsrfCookieName: 'XSRF-TOKEN',
    xsrfHeaderName: 'X-XSRF-TOKEN',
    maxContentLength: -1,
    maxBodyLength: -1,
    env: { FormData: [Function], Blob: [class Blob] },
    validateStatus: [Function: validateStatus],
    headers: AxiosHeaders {
      Accept: 'application/json, text/plain, */*',
      'User-Agent': 'google-maps-services-node-3.3.31',
      'Accept-Encoding': 'gzip'
    },
    httpsAgent: HttpsAgent {
      _events: [Object: null prototype],
      _eventsCount: 2,
      _maxListeners: undefined,
      defaultPort: 443,
      protocol: 'https:',
      options: [Object: null prototype],
      requests: [Object: null prototype] {},
      sockets: [Object: null prototype] {},
      freeSockets: [Object: null prototype] {},
      keepAliveMsecs: 1000,
      keepAlive: true,
      maxSockets: Infinity,
      maxFreeSockets: 256,
      scheduling: 'lifo',
      maxTotalSockets: Infinity,
      totalSocketCount: 0,
      createSocketCount: 9,
      createSocketCountLastCheck: 0,
      createSocketErrorCount: 0,
      createSocketErrorCountLastCheck: 0,
      closeSocketCount: 9,
      closeSocketCountLastCheck: 0,
      errorSocketCount: 0,
      errorSocketCountLastCheck: 0,
      requestCount: 9,
      requestCountLastCheck: 0,
      timeoutSocketCount: 3,
      timeoutSocketCountLastCheck: 0,
      maxCachedSessions: 100,
      _sessionCache: [Object],
      [Symbol(kCapture)]: false,
      [Symbol(agentkeepalive#currentId)]: 9
    },
    paramsSerializer: { serialize: [Function: paramsSerializer] },
    params: {
      input: 'Paros, Greece',
      key: '****************************'
    },
    method: 'get',
    url: 'https://maps.googleapis.com/maps/api/place/autocomplete/json',
    raxConfig: {
      currentRetryAttempt: 1,
      retry: 3,
      retryDelay: 100,
      instance: [Function],
      backoffType: 'exponential',
      httpMethodsToRetry: [Array],
      noResponseRetries: 2,
      checkRetryAfter: true,
      maxRetryAfter: 300000,
      statusCodesToRetry: [Array]
    },
    data: undefined
  },
  url: 'https://maps.googleapis.com/maps/api/place/autocomplete/json',
  exists: true
}

Any ideas?

[wangela]

If you would like to upvote the priority of this issue, please comment below or react with 👍 so we can see what is popular when we triage.

@exipnus Thank you for opening this issue. 🙏
Please check out these other resources that might help you get to a resolution in the meantime:

• Check the issue tracker - bugs and feature requests for Google Maps Platform APIs and SDKs
• Open a support case - Get 1:1 support in Cloud Console.
• Discord - chat with other developers
• StackOverflow - use the google-maps tag

This is an automated message, feel free to ignore.

[kishan102]

also running into this issue intermittently but infrequently when hitting placeAutocomplete(), increasing timeout did not help
"@googlemaps/google-maps-services-js": "^3.3.27"

[Wazbat]

Just wanted to say that I'm also running into this very very intermittently. We're sending a few million API calls a month, and over the past 30 days have seen this 27 times, 8 times today specifically

A sample request that failed:

language: en
locationbias: rectangle:-50.2187,-178.3872|51.2683,172.3057
input: brico depot st witz, France
inputtype: textquery

[exipnus]

Hello,

Any news on this?

Thank you

[dhritzkiv]

I am experiencing this with all of my requests today.

[fatheaddrummer]

I suddenly have this issue, without making updates or any changes.

[fatheaddrummer]

I tried it again with my mobile hotspot instead of wify and now it works. Does anybody understand what's happening? This is the srangest issue I've ever had. Since the error says that paramsSerializer is not a function, it seems code related, but simply changing the network solves the issue? Also, I've tried some direct API calls (without the client) with the same API key in my wifi network (where I receive the error), where it works smoothly, so it cannot be related to my IP address being blocked or something. I don't get it. If anybody has ideas, please let us know. Thank you!

#Edit: After Network Switch back to wifiy it seems to work again, while 100% of all requests failed before.

[Wazbat]

Just wanted to add to this. We've noticed this error occurring with other endpoints, like reverse geocode and find place

[osamaadam]

I've also been getting this irregularly with the geocode API.

[usefulthink]

Can you check with the latest version (we just recently upgraded axios to v1.5) if that problem still occurs?

[osamaadam]

For us, it was actually a network error. We had been getting random network errors ever since we upgraded from Node v18 to Node v20, upgrading to Node v20.5 magically fixed these network errors. (This is the issue if someone would like to read more nodejs/node#47822)

I think the main problem here is figuring out why the library is reporting network errors as paramsSerializer is not a function (I could reliably reproduce this error by faking a network issue with msw).

[usefulthink]

That just got me thinking, it could be that this is somehow related to the retry-axios package. Maybe it doesn't properly pickup the paraSerializer that was passed to the axios instance or something? I don't think this is actually tested anywhere for these error-cases (doesn't sound trivial, but probably worthwhile to do)... But that would probably explain this happening in all sorts of API functions and especially only happening intermittently.

[revathskumar]

In case if it helps anyone facing this issue.

We recently upgraded to @googlemaps/google-maps-services-js@3.3.41 from 3.3.32 diff and our tests using msw networkError is no more causing paraSerializer exception.

Seems like the issue got fixed by the upgrade of retry-axios. But not sure.

[usefulthink]

I'll close this for now. Please reopen or create a new issue if you are still seeing this problem.