When running my app I added a const to parse URL search params using the library NUQS which allow you to use the URL as the app state and set and retrieve them easily as use state. I been debugging this issue and can't seem to find why i get the error

TypeError: nuqs__WEBPACK_IMPORTED_MODULE_0__.parseAsString.withDefault is not a function

import { parseAsString } from 'nuqs';

export const mediaSearchParamsParsers = {
  search: parseAsString.withDefault(''),
  view: parseAsString.withDefault('grid'),
};

I tried reinstalling the npm packages, clean cache, next build but the issue seem to be isolated on this code snipped that i am running in the server.

Edit: it seems that the issue was caused by importing the parser from the wrong subpackage.

nuqs and nuqs/server

although both packages exist and the debugging outputs are marked as existing and with similar APIs. NextJs and in this case Webpack couldn’t resolve the module in the server. I am unsure if it is the module resolution, both are ES modules. Or if it is the wrong error from Webpack the error is incorrect since console logs and debugging showed the import as valid. But it just failed to compile

When running my app I added a const to parse URL search params using the library NUQS which allow you to use the URL as the app state and set and retrieve them easily as use state. I been debugging this issue and can't seem to find why i get the error

TypeError: nuqs__WEBPACK_IMPORTED_MODULE_0__.parseAsString.withDefault is not a function

import { parseAsString } from 'nuqs';

export const mediaSearchParamsParsers = {
  search: parseAsString.withDefault(''),
  view: parseAsString.withDefault('grid'),
};

I tried reinstalling the npm packages, clean cache, next build but the issue seem to be isolated on this code snipped that i am running in the server.

Edit: it seems that the issue was caused by importing the parser from the wrong subpackage.

nuqs and nuqs/server

although both packages exist and the debugging outputs are marked as existing and with similar APIs. NextJs and in this case Webpack couldn’t resolve the module in the server. I am unsure if it is the module resolution, both are ES modules. Or if it is the wrong error from Webpack the error is incorrect since console logs and debugging showed the import as valid. But it just failed to compile

• typescript
• npm
• next.js
• server-side-rendering

1 Answer 1

For debugging, add console.log(nuqs) before your mediaSearchParamsParsers declaration. Then, inspect the output in your browser's console (or server logs if it's running on the server). Does it contain parseAsString? If so, what does it look like? Does it have the withDefault method?

import * as nuqs from 'nuqs';

console.log("nuqs object:", nuqs); // Inspect the nuqs object
export const mediaSearchParamsParsers = {
  search: nuqs.parseAsString.withDefault(''),
  view: nuqs.parseAsString.withDefault('grid'),
};

Use your browser's developer tools (or a server-side debugger if applicable) to set breakpoints and step through the code. Examine the value of parseAsString at runtime.