How to correctly import Icons to my "components" subfolder

[evanTheTerribleWarrior]

I have started a project based on the quickstart that uses create-next-app.

I have created a src folder on the root directory and under that a "components" folder. In my component I want to load Icons. I am trying to load them from their respective esm folder but i get error "cannot use import statement outside a module".
Should i load the icons from their cjs folder? How can i fix this error (i prefer to use the esm icons if possible).

New to this sorry for the basic question

[dosubot[bot]]

Hey @evanTheTerribleWarrior! 👋 I'm Dosu, your friendly neighborhood bot here to help with bugs, answer questions, and guide you on your journey to becoming a contributor while we wait for a human maintainer to chime in. I'm diving into your icon import issue and will get back to you with a detailed answer shortly. Stay tuned!

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Yes, you are encountering an issue because Jest, the testing framework, often has trouble with the ES Modules (ESM) version of Paste Icons. As mentioned in the Paste documentation, Jest prefers the CommonJS (CJS) version of modules. However, there's a way to configure Jest to correctly handle the ESM versions of Paste Icons, which would allow you to continue using them.

You need to add a configuration to your jest.config.js file to tell Jest not to transform Paste Icons. This is done by using the transformIgnorePatterns option. Here's how you can configure it:

// jest.config.js
{
  "transformIgnorePatterns": [
    "/node_modules/@twilio-paste/icons/.*"
  ]
}

This configuration will instruct Jest to ignore transforming the Paste Icons module, thus allowing you to import icons from their /esm/ folder without encountering the "cannot use import statement outside a module" error.

For more information, you can refer to the Jest documentation on transformIgnorePatterns: Jest Documentation.

If you continue to experience issues, an alternative workaround, as suggested in the Paste documentation, is to change your icon imports to be from /cjs/ instead of /esm/. This is a less preferred method since you mentioned wanting to use the ESM icons if possible.

For further details, you can visit the Paste documentation discussion on this topic: Jest fails to import paste icons.

Remember, configuring Jest correctly should allow you to use the ESM icons without issues.

I also did a search, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Jest fails to import paste icons - Answer (updated: 07/19/2022, similarity score: 86%)
• Failed import with Paste icon in Jest (updated: 06/23/2022, similarity score: 84%)
• What should be the appropriate loader to use when using paste? (updated: 12/27/2022, similarity score: 84%)

[dosubot[bot]]

To resolve the "cannot use import statement outside a module" error when importing ESM icons into your components, follow the guidance provided by configuring your jest.config.js file. Add the transformIgnorePatterns option as shown:

// jest.config.js
{
  "transformIgnorePatterns": [
    "/node_modules/@twilio-paste/icons/.*"
  ]
}

This setup tells Jest to bypass transformation for Paste Icons, allowing you to import from the /esm/ folder directly. If the issue persists after this configuration, consider using the /cjs/ folder for your icons as a workaround, though this is not the preferred method since you aim to use ESM icons.

For additional context and troubleshooting, refer to the Jest documentation on transformIgnorePatterns and the Paste documentation discussions linked in the previous message. These resources provide further insights and community-driven solutions related to your issue.

Details

About Dosu
This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

To continue the conversation, mention @dosu.

[evanTheTerribleWarrior]

Actually i will use the cjs version of the icons which works fine. Closing this