Error: Insufficient params provided for localized pathname (getPathname()). Since I added "next-intl/routing"

Question

Since I added the config file and replace :

Navigation File

import { createLocalizedPathnamesNavigation, Pathnames } from 'next-intl/navigation';

By :

Config File

import {Pathnames, LocalePrefix} from 'next-intl/routing';} 

Navigation File

import { createLocalizedPathnamesNavigation } from "next-intl/navigation";
import { locales, pathnames, localePrefix } from "./config";

I get this error everytime I use the function getPathname(). For example:

Error: Insufficient params provided for localized pathname.
Template: /blog/[categorySlug]
Params: undefined

The weird thing is since I added 'next-intl/routing', typescript is telling me that I need to use "query" instead of "params" :

  const path = getPathname({
    locale: locale,
    href: {
      pathname: "/blog/[categorySlug]",
      query: { categorySlug: 'news' },
    },
  });

But query doesn't seems to work. When I look on the doc or working example, it looks like next-intl is using params and not query but that doesn't match the type of getPathname() for me… Here is what typescript telling me:

Object literal may only specify known properties, and 'params' does not exist in type '{ pathname: string; } & { query?: Record<string, SearchParamValue> | undefined; }'.

Wondering if it's a bug from next-intl. I am really lost here… Thank you for your help!

Answer 1

I had the same problem. My current workaround is to use any:

(router as any).push(
  {
    pathname,
    params
  },
  { locale: locale }
);

I was on v3.15.5 and updated to the latest(v3.17.2) but the types haven't been updated yet.