Giters

natemoo-re / astro-icon

Inline and sprite-based SVGs in Astro made easy!

Home Page:https://astroicon.dev

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Build errors when using Icon component

tylergaw opened this issue · comments

commented

I'm using Icon with a minimal Astro setup, but hitting errors during build that prevent usage.

Here's a repo with an isolated example and all the details in this issue https://github.com/tylergaw/astro-icon-issue-1-example

The setup

  • Astro 0.21.10
  • astro-icon 0.2.1
  • node 14.6.0 (also tried 16.9.1 with same results)

I've copied the main bits from the demo here https://github.com/natemoo-re/astro-icon/tree/main/demo and just slimmed it down to:

In src/pages/index.astro:

---
import { Icon } from 'astro-icon';
---
<html lang="en">
<head>
  <meta charset="utf-8" />
  <link rel="icon" type="image/x-icon" href="/favicon.ico" />
  <meta name="viewport" content="width=device-width" />
  <title>Welcome to Astro</title>
</head>
  <body>	
    <Icon name="adjustment" />
  </body>
</html>

And then running yarn build or running with yarn start produces a few errors.

There's more to all of these, but the most relevant bits seem like:

[vite] Error when evaluating SSR module /node_modules/svgo/lib/svgo-node.js?v=5f848506:
ReferenceError: require is not defined
  at /node_modules/svgo/lib/svgo-node.js?v=5f848506:3:12
...

[vite] Error when evaluating SSR module /node_modules/astro-icon/lib/utils.ts:
ReferenceError: require is not defined
  at /node_modules/svgo/lib/svgo-node.js?v=5f848506:1:12
...

[vite] Error when evaluating SSR module /node_modules/astro-icon/index.ts?v=5f848506:
TypeError: Line must be greater than or equal to 1, got -1
  at BasicSourceMapConsumer.SourceMapConsumer_findMapping [as _findMapping]
...
commented

Yep, seeing this as well! Adding this to your astro.config.mjs file seems to fix it.

export default {
  vite: {
    ssr: {
      external: ['svgo']
    }
  }
}

I'll look for a way to keep everyone from needing to do this extra step.

commented

Oh cool. Yep, that fixes it for me too. Thank you

commented

Yep, seeing this as well! Adding this to your astro.config.mjs file seems to fix it.

export default {
  vite: {
    ssr: {
      external: ['svgo']
    }
  }
}

I'll look for a way to keep everyone from needing to do this extra step.

thanks, this fixes for me too!

commented

I've added these instructions to the main README, so I'm going to close this issue.

Still want to look into vendoring svgo or some other solution to fix this problem without needing a config step. It's also possible this will be fixed by upgrading Vite inside of Astro.

commented

FYI potential update:
I have only tested in a lame site (nothing huge) but the svgo config requirement inside vite (possibly) isn't required any longer.

Running latest Astro v1.0.0-beta.73.

Definitely check a little more extensively before removing the section of the docs, though.

commented

I'm using astro v1.1.2, and the documented fix was not necessary.

commented

You dont need to put that config now in newer versions (doing so causes build issues)
Maintainer: Please update your docs in npm site.