Errors/warnings when building

[garyo]

I just pulled your beautiful astro template -- planning to migrate my blog to Astro and you've got everything I need; looks great!

I do notice that when I try to build, I get some errors and notes though. I'm using bun and node.js v20 in case that's significant.

09:55:32 [vite] Re-optimizing dependencies because lockfile has changed
09:55:32 [types] Generated 171ms
09:55:32 [check] Getting diagnostics for Astro files in /Users/garyo/src/garyo-blog/astro-erudite...
astro.config.ts:35:7 - error ts(2578): Unused '@ts-expect-error' directive.
35       // @ts-expect-error
         ~~~~~~~~~~~~~~~~~~~
src/components/SocialIcons.astro:27:12 - warning ts(6385): 'Twitter' is deprecated.
27   Twitter: Twitter,
              ~~~~~~~
src/components/SocialIcons.astro:25:11 - warning ts(6385): 'Github' is deprecated.
25   GitHub: Github,
             ~~~~~~
src/components/SocialIcons.astro:13:3 - warning ts(6385): 'Twitter' is deprecated.
13   Twitter,
     ~~~~~~~
src/components/SocialIcons.astro:7:3 - warning ts(6385): 'Github' is deprecated.
7   Github,
    ~~~~~~
src/components/ui/mobile-menu.tsx:1:8 - warning ts(6133): 'React' is declared but its value is never read.
1 import React, { useState, useEffect } from 'react'
         ~~~~~

Result (41 files): 
- 1 error
- 0 warnings
- 5 hints

and if I remove that // @ts-expect-error line, then it builds OK but with these CSS warnings:

09:59:43 [WARN] [vite] warnings when minifying css:
▲ [WARNING] Expected ":" [css-syntax-error]

    <stdin>:665:12:
      665 │   blockquote p:first-of-type::before: false;
          │             ^
          ╵             :


▲ [WARNING] Expected ":" [css-syntax-error]

    <stdin>:666:12:
      666 │   blockquote p:last-of-type::after: false;
          │             ^
          ╵             :


▲ [WARNING] Expected ":" [css-syntax-error]

    <stdin>:770:5:
      770 │   pre code: false;
          │      ^
          ╵      :

which I think are from tailwind.config.ts.

[jktrn]

Hello @garyo, thank you for opening an issue!

Regarding the hints/warnings:

• error ts(2578): Unused '@ts-expect-error' directive: this should be fixed in the latest commit (c4b6e75). Thank you!
• warning ts(6385): 'Twitter' is deprecated. and similar: this is due to active discussion within the lucide-icons/lucide repository about icons pertaining to brands like Github and Twitter and should be ignored. I'll look into a separate icon pack for brand icons, any suggestions would be helpful.
• Expected ":" [css-syntax-error] and similar: this should be fixed in the latest commit (c4b6e75).

[garyo]

Thanks! As for the icons, my current blog (which is built with nuxt/vue3) uses @nuxt/icon which apparently uses Iconify and https://icones.js.org/ -- don't know if that's helpful or not.

[jktrn]

Hi @garyo,

Thanks for the suggestion—I've updated the blog to now use astro-icon, which supports local, custom SVG icons via the /src/icons/ route and any external @iconify-json/* package (essentially anything within https://icones.js.org/, e.g. @iconify-json/lucide). I've stuck to Lucide icons, but have just routed them through the astro-icon middleman to dodge the deprecation warning, with the plus of supporting the tens of thousands of other icon packs if you wish to use them. Cheers!