material-tailwind with react in astro: named export 'Avatar' not found on astro build process

[ignaciodiazfica]

I've trying to build my app created with astro and react and i get this error message at the moment i build it

> astro build

12:01:33 [content] No content directory found. Skipping type generation.
12:01:33 [build] output target: static
12:01:33 [build] Collecting build info...
12:01:33 [build] Completed in 63ms.
12:01:33 [build] Building static entrypoints...
12:01:33 [build] Completed in 0.80s.

 building client 

(!) Some chunks are larger than 500 kBs after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-options/#output-manualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
Completed in 2.37s.

 generating static routes 
 error   Named export 'Avatar' 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 { ThemeProvider: ThemeProvider$1, Menu, MenuHandler, Button, Avatar, MenuList, MenuItem, Typography, Navbar, IconButton, Collapse, Carousel, Input, Textarea, Card } = pkg;

I tried to implement the solution they suggest but it doesn't work, also i read about downgrade material-tailwind/react version to 2.0.5 but didn't work neither. I think is a bug but i don't know how to solve it.

Dependencies

"dependencies": {
    "@astrojs/react": "^3.0.0",
    "@astrojs/tailwind": "^5.0.0",
    "@heroicons/react": "^2.0.18",
    "@material-tailwind/react": "^2.1.1",
    "@types/react": "^18.2.21",
    "@types/react-dom": "^18.2.7",
    "astro": "^3.0.7",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "tailwindcss": "^3.3.3"
  }

[sajadevo]

Hey @ignaciodiazfica it's already giving you the fix

import pkg from '@material-tailwind/react';

const { ThemeProvider: ThemeProvider$1, Menu, MenuHandler, Button, Avatar, MenuList, MenuItem, Typography, Navbar, IconButton, Collapse, Carousel, Input, Textarea, Card } = pkg;

[bitpickle]

Same error here, i tried with remix also.

import pkg from '@material-tailwind/react';

const { ThemeProvider: ThemeProvider$1, Menu, MenuHandler, Button, Avatar, MenuList, MenuItem, Typography, Navbar, IconButton, Collapse, Carousel, Input, Textarea, Card } = pkg;

This is not how the documentation teaches

https://www.material-tailwind.com/docs/react/guide/remix

[mdolzhkowtech]

The same for me with Accordion component. Astro + @material-tailwind/react.

It doesn't work: import pkg from '@material-tailwind/react'; const { Accordion } = pkg;

[alex20465]

Same here material-tailwind/react with astro doesn't work.

[FrankCheungDev]

Hey @ignaciodiazfica it's already giving you the fix

import pkg from '@material-tailwind/react';

const { ThemeProvider: ThemeProvider$1, Menu, MenuHandler, Button, Avatar, MenuList, MenuItem, Typography, Navbar, IconButton, Collapse, Carousel, Input, Textarea, Card } = pkg;

It works for me when running astro build. But it failed when running astro dev

[lila-papazian]

@sajadevo Maybe you can look at this again? It´s not working.

[TaylanTatli]

I started a new project with Astro and wanted to use Material Tailwind, but now I'm having this error. 😞

[dyerrington]

I also have this error on a new project in Astro.

[tasesmuemils]

Same error for me. Trying to use Tabs with "astro dev".

With this:

import {
  Tabs,
  TabsHeader,
  TabsBody,
  Tab,
  TabPanel,
} from "@material-tailwind/react";

23:31:16 [ERROR] [vite] Named export 'TabPanel' 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 {Tabs, TabsHeader, TabsBody, Tab, TabPanel} = pkg;

  Stack trace:
    at analyzeImportedModDifference (file:///Users/misinjaa/Documents/kld-portfolio/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:50953:19)
    [...] See full stack trace in the browser, or rerun with --verbose.

With this:

import pkg from "@material-tailwind/react";
const { Tabs, TabsHeader, TabsBody, Tab, TabPanel } = pkg;

23:40:36 [ERROR] Unable to render Tabs because it is undefined!
Did you forget to import the component or is it possible there is a typo?
  Stack trace:
    at /Users/misinjaa/Documents/kld-portfolio/node_modules/astro/dist/runtime/server/render/component.js:58:11
    [...] See full stack trace in the browser, or rerun with --verbose.

[r1y4h]

For anyone who has the same issue with Astro.

The documented way of importing will work only when you render your component on the client side, when using the client directive client:only="react"

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

But if you are doing a server side rendering, you need to:

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

I hope this gets fixed by the dev of material-tailwind. We should be able to always import like what it is indicated in the documentation.

EDIT. This seems to be an issue only with latest version of Astro, but with Astro v3 (the one included in the Astro Launch UI template), the documented way of importing works fine for both SSR and CSR.

[ZarPeter]

Tried r1y4h's solution just now and it fails for me with this error:

[ERROR] Expected string but found "pkg"

Just tried following the steps in the documentation today.. and running npm run dev

[Dante-dan]

I have the same issue