#I get error when running preview

11 messages · Page 1 of 1 (latest)

dry parcel
#

file:///C:/Users/arnez/Desktop/TrendFox/trendfox-astro/dist/server/chunks/pages/404_tgbDijf4.mjs:205
const err = new Error(Unable to locate the "${setName}" icon set!);
^

Error: Unable to locate the "mdi" icon set!
at file:///C:/Users/arnez/Desktop/TrendFox/trendfox-astro/dist/server/chunks/pages/404_tgbDijf4.mjs:205:17
at AstroComponentInstance.Icon [as factory] (file:///C:/Users/arnez/Desktop/TrendFox/trendfox-astro/dist/server/chunks/astro_n4nOeW-F.mjs:307:12)
at AstroComponentInstance.init (file:///C:/Users/arnez/Desktop/TrendFox/trendfox-astro/dist/server/chunks/astro_n4nOeW-F.mjs:1165:29)
at AstroComponentInstance.render (file:///C:/Users/arnez/Desktop/TrendFox/trendfox-astro/dist/server/chunks/astro_n4nOeW-F.mjs:1170:18)
at Object.render (file:///C:/Users/arnez/Desktop/TrendFox/trendfox-astro/dist/server/chunks/astro_n4nOeW-F.mjs:1688:22)
at renderChild (file:///C:/Users/arnez/Desktop/TrendFox/trendfox-astro/dist/server/chunks/astro_n4nOeW-F.mjs:1121:17)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

Node.js v20.8.0

meager raptorBOT
#

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

#

Based on the error message you provided, it seems like Astro is unable to locate the "mdi" icon set. This could be due to a variety of reasons such as the icon set not being installed or not being correctly imported.

One of the extracts from the GitHub issues suggests a similar problem with the astro-icon package. The user was trying to use an icon from the mdi set and encountered an error. A member suggested adding the following code to the astro.config.mjs file:

defineConfig({
  vite: {
    ssr: {
      external: ['svgo']
    }
  }
})

This was suggested because svgo doesn't ship a proper ESM version. You can try adding this to your astro.config.mjs file and see if it resolves the issue.

If the problem persists, you might want to check if the mdi icon set is correctly installed and imported in your project.

Please note that this solution is based on the information available in the extracts and might not completely solve your issue. If the problem persists, I would recommend checking the Astro documentation or seeking help from the Astro community on GitHub or Discord.

Source: GitHub Issue 7929 (https://github.com/withastro/astro/issues/7929)

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

#

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

dry parcel
#

@meager raptor how do i impliment icons in astro

meager raptorBOT
#

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

#

To implement icons in Astro, you can use various methods. Here are a few examples based on the information provided in the extracts:

  1. Astro Components: You can create an Astro component that returns the desired icon based on the props passed to it. Here's an example from a GitHub issue:
---
export const Icon = ({ name }) => {
    switch (name) {
        case 'email': return <EmailIcon />;
        case 'twitter': return <TwitterIcon />;
        case 'facebook': return <FacebookIcon />;
        case 'linkedin': return <LinkedInIcon />;
    }
};

const { name } = Astro.props;
---
<Icon name={name} />

Please note that this method requires you to have the EmailIcon, TwitterIcon, FacebookIcon, and LinkedInIcon components defined in your project.

  1. Astro Dev Toolbar Icon: Astro provides a built-in component for displaying icons in the dev toolbar. You can use it like this:
<astro-dev-toolbar-icon icon="astro:logo" />

or pass SVG markup as a slot:

<astro-dev-toolbar-icon> <svg>...</svg></astro-dev-toolbar-icon>

This method is limited to the icons provided by Astro.

  1. Third-party Libraries: You can use third-party libraries like astro-iconify, astro-integration-lottie, lucide-astro, etc. These libraries provide a wide range of icons and offer more flexibility. You can install them via npm and import the icons into your Astro components.

Remember to install the necessary packages and import the icons correctly in your Astro files.

#

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

dry parcel
#

@meager raptor i get this error when deploying Error fetching data: TypeError: fetch failed
at Object.fetch (node:internal/deps/undici/undici:11372:11)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async fetchApi (file:///vercel/path0/dist/chunks/pages/_slug__cZL78InD.mjs:78:17)
at async file:///vercel/path0/dist/chunks/pages/index_NpIhUUy0.mjs:55:17
at async callComponentAsTemplateResultOrResponse (file:///vercel/path0/node_modules/astro/dist/runtime/server/render/astro/render.js:85:25)
at async renderToReadableStream (file:///vercel/path0/node_modules/astro/dist/runtime/server/render/astro/render.js:35:26)
at async renderPage (file:///vercel/path0/node_modules/astro/dist/runtime/server/render/page.js:29:12)
at async renderPage (file:///vercel/path0/node_modules/astro/dist/core/render/core.js:50:20)
at async #tryRenderRoute (file:///vercel/path0/node_modules/astro/dist/core/pipeline.js:110:18)
at async BuildPipeline.renderRoute (file:///vercel/path0/node_modules/astro/dist/core/pipeline.js:58:20) {
cause: Error: connect ECONNREFUSED 127.0.0.1:1337
at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1555:16) {
errno: -111,
code: 'ECONNREFUSED',
syscall: 'connect',
address: '127.0.0.1',
port: 1337
}

meager raptorBOT
#

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