Error using use-query-params when running build with Astro and Netlify

[samaritanau]

Hi, we are trying to use this in an astro site and when running npm run build we get the following error, any idea what might be causing that?

import { useQueryParam, StringParam, useQueryParams, withDefault, NumberParam, ArrayParam, BooleanParam } from 'use-query-params';

SyntaxError: Named export 'ArrayParam' not found. The requested module 'use-query-params' is a CommonJS module, which may not support all module.exports as named exports.

CommonJS modules can always be imported via the default export, for example using:

import pkg from 'use-query-params'; const { useQueryParam, StringParam, useQueryParams, withDefault, NumberParam, ArrayParam, BooleanParam } = pkg;

[penx]

I have the same when using [email protected] and [email protected]

https://stackblitz.com/edit/remix-run-remix-1gqkvs

[Nic-S]

i have same issue using vitest 1.3.0

[cythrawll]

Ran into this too, seems issue with esm and server rendered apps. https://publint.dev/[email protected] shows some esm issues that's probably causing the problem.

[kevinhinterlong]

Here's what I had to do in vite to get around this. I tried directly import the index.js and index.cjs.js files, but when doing that I could only get it to either work with the dev server or in the built version but not both

import { defineConfig } from 'vite';
import path from 'node:path';

export default defineConfig({
  resolve: {
    alias: {
      'serialize-query-params': path.resolve(__dirname, 'node_modules/serialize-query-params/dist/index.js'),
      'use-query-params': path.resolve(__dirname, 'node_modules/use-query-params/dist/index.js'),
    },
  },
});