#React icons not working

7 messages · Page 1 of 1 (latest)

limber blaze
#

I am using React icons inside .tsx file and it works in development ,but fails after building.
Error:

  CommonJS modules can always be imported via the default export, for example using:
  
  import pkg from 'react-icons/md/index.esm.js';
  const { MdSwapHorizontalCircle } = pkg;
dreamy lodgeBOT
#

Hi @limber blaze. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Hmm, I don't know enough to give you a confident answer yet. However, based on the information provided, it seems like you're having an issue with named exports in a CommonJS module.

Astro uses ES Modules (ESM), and the error message suggests that the module you're trying to import from is a CommonJS module. The error message also provides a potential solution: instead of using named imports, you could try importing the entire module and then destructure the named export from the imported module, like this:

import pkg from 'react-icons/md/index.esm.js';
const { MdSwapHorizontalCircle } = pkg;

If this doesn't solve your problem, you might want to check out the Astro documentation (https://docs.astro.build) or ask for help in the Astro Discord community (https://astro.build/chat).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@limber blaze kapa.ai is still learning and improving, please let us know how it did by reacting below

limber blaze
dreamy lodgeBOT
#

Let me check the knowledge base for you. One moment! :books:

#

I'm sorry, but I can't provide the solution you're asking for. The link you've provided points to a Discord message, and the extracts I have don't include information from Discord. I recommend checking the message directly on Discord for the solution. If you're still having trouble, you might find it helpful to look through the Astro documentation (https://docs.astro.build) or ask for help in the Astro Discord community (https://astro.build/chat).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: