Gamesome-ab / astro-font

Host fonts locally in your Astro project. Set up custom preloaded fonts and fallback fonts to reduce CLS. The Astro variant of https://www.npmjs.com/package/@next/font
MIT License
9 stars 1 forks source link

Font loader not working #2

Closed macx closed 7 months ago

macx commented 7 months ago

If I embed the Font Loader into my BaseLayout.astro

import AstroFont from '@gamesome/astro-font/AstroFont.astro'

…I get the following error:

Cannot find module '@gamesome/astro-font/AstroFont.astro' or its corresponding type declarations.

If I change the import to its path in node_modules

import AstroFont from '@gamesome/astro-font/components/AstroFont.astro'

…I get the following error:

Missing "./components/AstroFont.astro" specifier in "@gamesome/astro-font" package

jsve commented 7 months ago

The first one should be correct. Can you add a minimal reproduction example?

macx commented 7 months ago

@jsve No, but my project is live at https://hawk-gt1191.de, the repository is open source at https://github.com/macx/hawk-gt1191.

I added the needed code lines for astro-font but commented it out (and added regulary fontsource-components to work. You should be clone and run this easily (with yarn).

jsve commented 7 months ago

I can't reproduce the issue in your repository. However, I was unable to yarn install, with the following error:

warning Pattern ["wrap-ansi-cjs@npm:wrap-ansi@^7.0.0"] is trying to unpack in the same destination "/home/.cache/yarn/v6/npm-wrap-ansi-cjs-7.0.0-67e145cff510a6a6984bdf1152911d69d2eb9e43-integrity/node_modules/wrap-ansi-cjs" as pattern ["wrap-ansi@^7.0.0"]. This could result in non-deterministic behavior, skipping.
error An unexpected error occurred: "Failed to fetch dependencies:
- wrap-ansi-cjs@7.0.0".

This seems to be comming from @astrojs/check. After removing that, I was able to install and run the project. Are you sure @gamesome/astro-font was properly installed?

Please set up a minimal reproduction (eg. on stackblitz) if you need further assistance!

macx commented 7 months ago

@jsve Sure, here is a blank blog template: https://github.com/macx/astro-font-test

Please run yarn build (which includes the check and has to be installed). It fails:

src/components/BaseHead.astro:2:23 - error ts(2307): Cannot find module '@gamesome/astro-font/AstroFont.astro' or its corresponding type declarations. 2 import AstroFont from "@gamesome/astro-font/AstroFont.astro";

jsve commented 7 months ago

I can see no issues in that repository either. After cloning and yarn build (using astro check) here is the output:

11:50:22 Types generated 5.32s
11:50:22 [build] output: "static"
11:50:22 [build] directory: /home/projects/gqainkapj.github/dist/
11:50:22 [build] Collecting build info...
11:50:22 [build] ✓ Completed in 5.33s.
11:50:22 [build] Building static entrypoints...
11:50:26 [vite] ✓ built in 3.18s
11:50:26 [build] ✓ Completed in 3.35s.

 generating static routes 
11:50:26 ▶ src/pages/about.astro
11:50:26   └─ /about/index.html (+40ms)
11:50:26 ▶ src/pages/blog/index.astro
11:50:26   └─ /blog/index.html (+12ms)
11:50:26 ▶ src/pages/blog/[...slug].astro
11:50:26   ├─ /blog/markdown-style-guide/index.html (+13ms)
11:50:26   ├─ /blog/using-mdx/index.html (+22ms)
11:50:26   ├─ /blog/first-post/index.html (+5ms)
11:50:26   ├─ /blog/second-post/index.html (+5ms)
11:50:26   └─ /blog/third-post/index.html (+6ms)
11:50:26 λ src/pages/rss.xml.js
11:50:26   └─ /rss.xml (+2ms)
11:50:26 ▶ src/pages/index.astro
11:50:26   └─ /index.html (+4ms)
11:50:26 ✓ Completed in 173ms.

11:50:26 [@astrojs/sitemap] `sitemap-index.xml` created at `dist`
11:50:26 [build] 8 page(s) built in 8.86s
11:50:26 [build] Complete!

The only thing that sticks out is that you have moduleResolution set to "Node" in your tsconfig. Also, which version of node and yarn are you using?

macx commented 7 months ago

Yep, @jsve, my tsconfig was misconfigurated. Removing "moduleResolution": "Node" did the trick.

Thanks for your investigation!