TypeScript type error on imports: "The 'accessible-astro-components' library may need to update its package.json or typings."

[Josh Goldberg ✨]

In a project using a tsconfig.json with "moduleResolution": "Bundler", trying to import from accessible-astro-components gives a TypeScript type error:

Could not find a declaration file for module 'accessible-astro-components'. '/Users/josh/repos/joshuakgoldberg-dot-com/node_modules/.pnpm/accessible-astro-components@2.1.0/node_modules/accessible-astro-components/index.js' implicitly has an 'any' type.
  There are types at '/Users/josh/repos/joshuakgoldberg-dot-com/node_modules/accessible-astro-components/types/index.d.ts', but this result could not be resolved when respecting package.json "exports". The 'accessible-astro-components' library may need to update its package.json or typings.ts(7016)

You can also see that the types are being flagged on https://arethetypeswrong.github.io/?p=accessible-astro-components%402.1.0.

Full repro steps:

git clone https://github.com/JoshuaKGoldberg/joshuakgoldberg-dot-com
cd joshuakgoldberg-dot-com
git checkout 6f8411168447dd6b41e9644ee954c3faa6b822fe
pnpm i

...then open BaseLayout.astro in your editor (e.g. code .).

A couple of resources in case it's helpful:

• https://blog.isquaredsoftware.com/2023/08/esm-modernization-lessons: great post by @markerikson
• https://github.com/JoshuaKGoldberg/ts-api-utils/blob/6b5394619e87cfb1794b5d8467854e975e55a327/package.json: package with dual CJS & ESM exports

Oh, and this library is awesome! Thanks for making it 😄

[Mark Teekman]

Hey @JoshuaKGoldberg, thanks for submitting the issue! To be fair, I've got no experience with TypeScript. @david-abell did some incredible work to add TypeScript support to this project. I might look into it when I can find the time, but any help with this would be highly appreciated 😄 And thank you for the compliment, glad you find it useful!

[David Abell]

Hmm @JoshuaKGoldberg I get some git checkout errors with your supplied repo could be bad internet on my end atm. If you change the export key in your local package.json for accessible-astro-components to the below does that resolve the issue?

  "exports": {".": {
    "import": {
      "types": "./types/index.d.ts",
      "default": "./index.js"
  }  
  }},

[Josh Goldberg ✨]

git errors

Hmm, the direct URL is https://github.com/JoshuaKGoldberg/joshuakgoldberg-dot-com/tree/6f8411168447dd6b41e9644ee954c3faa6b822fe if that helps.

change the export key

Yup, that fixes it!

[Mark Teekman]

Thanks for pitching in @david-abell, you're my TypeScript hero! 😃 And thanks for submitting the solution in a PR @JoshuaKGoldberg 👍🏼

[David Abell]

Thanks @JoshuaKGoldberg @markteekman I got sick while puzzling over how to get these changes to pass "Are the types wrong". Hadn't seen that tool before but I'm impressed by it!

Turns out it was the actual type definition imports at fault but I think I've got a working fix. I should be able to get a PR in for soon.

[Mark Teekman]

Thanks @david-abell! Hope you're feeling better now 🙂