[astro] Cannot find module or its corresponding type declarations

[jlsnow301]

Describe the bug On a completely stock installation of astro v1.2.4 (the current version as of this post), cannot use components as expected from the agnostic-astro package. Throws compile and runtime errors that packages cannot be found or are not exported.

Here is a repo which throws the below screenshot: https://github.com/jlsnow301/agnostic-astro-test

To Reproduce Steps to reproduce the behavior:

1. yarn create astro
2. cd to folder
3. yarn add agnostic-astro
4. Attempt to use one of the components

Expected behavior Install astro, install agnostic-astro, then use components like import AgButton from "agnostic-astro" <AgButton>Something</AgButton>

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: Win11
• Browser: Brave
• Version: 1.43.89

Issues with pull requests are deeply appreciated! But sometimes it's worth discussing first so the implementation works with AgnosticUI guidelines

[roblevintennis]

Thanks for this thorough ticket -- I'll look into next spare cycle I have!

[roblevintennis]

@jlsnow301 Again, I'm so sorry you've faced this aggravation! Please bear with me on longer-term fixes as I'm having to literally sneak in 30 minutes here there with my current work-life schedule. That said, I have some interim good'ish news.

First off I was able to repro with the test GH repo you have! I believe the problem likely has to do with never having set up Typescript typings for the agnostic-astro package (which is stated in the error corresponding type declarations).

Longer term, I think I'll need to put some effort into generating those properly (I really didn't remember seeing that needed when I created the package during the hackathon but Astro has probably improved their Typescript idioms and so it's all for the best that we eventually have these typings).

Above said, there's a work around using "import aliases" per https://docs.astro.build/en/guides/typescript/#import-aliases I proof-of-concepted from your same repo. Simply update these files as such:

tsconfig.json

{
  "extends": "astro/tsconfigs/base",
  "compilerOptions": {
    "strict": true,
    "baseUrl": ".",
    "paths": {
      "@components/*": ["node_modules/agnostic-astro/src/lib/components/*"],
    },
    "moduleResolution": "node", // might not be needed not sure?
  },
}

You could likely change @components to be @whatever if you're already using that for your internal components or something...it's just an alias after all :)

index.astro

---
import Layout from "../layouts/Layout.astro";
import 'agnostic-css/public/css-dist/common.min.css';
import AgButton1 from '@components/Button.astro';
---

<Layout title="Welcome to Astro.">
  <AgButton1 mode={'primary'} isRounded={true}>Test</AgButton1>
</Layout>

With that I can run the app:

---

Next steps:

• Hopefully above solution at least unblocks you for the time-being
• Next spare cycle I may add the workaround to the docs and also link out the netlify agnostic-astro docs better from the main agnosticui.com docs site. I need to think about this though because really I do want to fix the typescript typings thing
• Add typings for agnostic-astro which will involve doing a bit of research to see if Astro has a convention that allows me to avoid having to create a whole 'nuther @types/agnostic-astro or something. Typescript typings is always a challenge for me even though other packages are typed and appear to work...it's always a PITA and I need to dedicate some extra time to grok then implement

I appreciate you bring this to my attention and your patience and any inconvenience. I'll leave the bug open so I can still prioritize more attention as I get time!