useQueryState : TypeError: Cannot read properties of null (reading 'toString')

[Kamalito75]

Context

What's your version of nuqs?

"nuqs": "^2.2.2"

What framework are you using?

• ✅ Next.js (app router)

Which version of your framework are you using?

"next": "14.2.5"

Description

I have a hook (useCreateSessionModal) to display a modal depending on the value of "create-session" from useQueryState :

'use client'

import { parseAsBoolean, useQueryState } from "nuqs";

export const useCreateSessionModal = () => {
  const [isOpen, setIsOpen] = useQueryState(
    "create-session",
    parseAsBoolean.withDefault(false).withOptions({ clearOnDefault: true })
  );

  const open = () => setIsOpen(true);
  const close = () => setIsOpen(false);

  return {
    isOpen,
    open,
    close,
    setIsOpen,
  };
};

I have the following error :
TypeError: Cannot read properties of null (reading 'toString')

Reproduction

[franky47]

Do you have more info of where the error is thrown from?

FYI, you don't need to specify clearOnDefault: true (it's the default value)

[Kamalito75]

I'm calling useCreateSessionModal from a client component (named client.tsx):

"use client";

import { useCreateSessionModal } from "@/features/sessions/hooks/use-create-session-modal";

const AccountIdClient = () => {
  const { open: createSession } = useCreateSessionModal();

This client component is used in a page.tsx file :

import React from 'react'
import AccountIdClient from './client'

export default function AccountPage() {
  return (
    <AccountIdClient />
  )
}

[Kamalito75]

The error is caused by the absence of the "create-session" URL parameter on the page that invokes the hook.
Should I check for the presence of create-session in the URL before calling useQueryState?

[franky47]

No, it takes care of that for you. When the search param is not present in the URL, the returned state is the default value.

Does the error pop up when rendering the component or is it when triggering an event?

Are you using the React Compiler by any chance?

If all else fails, could you please provide a minimal reproduction?

[Kamalito75]

The error pops up when the component is rendered.
I'm building a minimal reproduction.

[franky47]

I see one case where a null error would occur (see #781), though it's not on a .toString call, could you try this and let me know if it helps please?

pnpm add https://pkg.pr.new/nuqs@781

[Kamalito75]

Thanks for your help François. It solved my problem. Have a nice weekend.

[github-actions]

🎉 This issue has been resolved in version 2.2.3 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀