NPM run build issue with Vueperslides

[midlantica]

What version of astro are you using?

latest

Are you using an SSR adapter? If so, which one?

no

What package manager are you using?

npm

What operating system are you using?

Mac OS Big Sur 11.6.8

Describe the Bug

`> npm run build

@example/basics@0.0.1 build
astro build

11:44:45 PM [build] output target: static
11:44:45 PM [build] Collecting build info...
11:44:45 PM [build] Completed in 577ms.
11:44:45 PM [build] Building static entrypoints...
11:44:48 PM [build] Completed in 3.00s.

building client
Completed in 1.02s.

generating static routes
error Named export 'VueperSlide' not found. The requested module 'vueperslides' 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 'vueperslides';
const { VueperSlides, VueperSlide } = pkg;

**/dist/entry.mjs?time=1662266689397:4
/ empty css */import { VueperSlides, VueperSlide } from 'vueperslides';
^^^^^^^^^^^
SyntaxError: Named export 'VueperSlide' not found. The requested module 'vueperslides' 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 'vueperslides';
const { VueperSlides, VueperSlide } = pkg;

Link to Minimal Reproducible Example

https://github.com/midlantica/rogerivens.com

Participation

• I am willing to submit a pull request for this issue.

[midlantica]

Love Astro. I'm excited to do new work! I'm a bit of a junior.. maybe it's something simple, maybe it's a real issue? Just trying to finish a little job... but cannot build! All is well in npm run dev. Thanks.

[matthewp]

Does this work:

import * as pkg from 'vueperslides';
const { VueperSlides, VueperSlide } = pkg;

[matthewp]

Setting noExternal on this package fixes it. Unfortunately not every package is compatible with Node ESM is this is one of them:

export default defineConfig({
  vite: {
    ssr: {
      noExternal: ['vueperslides']
    }
  }
});

https://stackblitz.com/github/withastro/astro/tree/latest/examples/minimal?file=src%2Fpages%2Findex.astro&on=stackblitz

This one has pretty high download numbers so I'm going to make it so we do this for you.

[matthewp]

Fixed in #4639

[midlantica]

Thank you so much for your help! I got insane busy and couldn't try fix, or thank you earlier.

It works now! Astro rocks!