Astro v4 SSR - The requested module '@material-tailwind/react' is a CommonJS module

[r1y4h]

Astro Info

Astro                    v4.5.13
Node                     v20.11.0
System                   Windows (x64)
Package Manager          yarn
Output                   static
Adapter                  none
Integrations             @astrojs/react
                         @astrojs/tailwind

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

In Astro v3, importing components from '@material-tailwind/react' works fine for both SSR and CSR

import { Button } from '@material-tailwind/react';

Then on my Astro page:

<Menu client:only="react" />
<Menu />

In Astro v4, the above works fine for client side rendering only.
But if you try this in Astro v4 SSR, Vite will throw an error:

[vite] Named export 'Button' not found. The requested module '@material-tailwind/react' 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 '@material-tailwind/react';
const {Button} = pkg;

The error points to '@material-tailwind/react' being a CommonJS module. I read that Vite v5 requires ESM after v4, but why does it work with CSR?

For now I added this in my Astro config as a workaround:

vite: {
    legacy: {
      proxySsrExternalModules: true
    }
  }

What's the expected result?

import { Button } from '@material-tailwind/react';

Should work for both SSR and CSR

Link to Minimal Reproducible Example

CodeSandbox Link

Participation

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

[r1y4h]

@matthewp thank you