astro:db db import is not typed when using `strictest` typescript preset and a .js config file

[ZachSandersDev]

Astro Info

Astro                    v4.5.8
Node                     v20.11.0
System                   macOS (arm64)
Package Manager          npm
Output                   static
Adapter                  none
Integrations             @astrojs/react
                         astro:db
                         @astrojs/db/file-url

If this issue only occurs in one browser, which browser is a problem?

Not browser specific

Describe the Bug

If I create a brand new project using npm create astro@latest:

1. Select the strictest option for typescript
2. Add astro db via npx astro add db
3. Attempt to use import { db } from "astro:db" in a .astro file

Then typescript will not pick up on DrizzleORM types for that import. User defined tables are available from astro:db, but everything else like db, eq, gt, count, and sql will result in a type error saying those are not exported from astro:db

This type error can be seen when using the VSCode astro extension, or when running npx astro check.

This seemingly only happens for .astro files. Other imports like defineTable and defineDb work just fine in db/config.ts and db/seed.ts.

Changing "extends": "astro/tsconfigs/strictest" to "extends": "astro/tsconfigs/strict" in tsconfig.json fixes this issue.

What's the expected result?

I would expect that the generated db types from astro would work, even when using the strictest typescript preset.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/astro-db-strictest-bug?file=db%2Fseed.ts

Participation

• [ ] I am willing to submit a pull request for this issue.

[Princesseuh]

This happens because strictest has allowJs: false in it. The types for astro:db are imported inside the TypeScript project using the import to @astrojs/db, but since that import happens inside a .mjs file by default and allowJs is set to false, the types never end up being included in the TypeScript project. Two workarounds:

• Set allowJs to true in your tsconfig.json OR
• Make your Astro config a .ts

[mayank99]

Maybe the strictest preset should be changed to include allowJs: true?

Or maybe create-astro should create an astro.config.ts file if strictest preset is selected?

[bholmesdev]

That's a good point @mayank99. I think introducing allowJs to strictest would be a bit odd, since type strictness and allowing JS don't go hand-in-hand.

I agree that recommending an astro.config.ts is at least an improvement we can make from our documentation. Agreed our examples could include this as well. We have more integration authors injecting virtual module types, so I think it's a pattern we should more officially document and support. Working on a docs task to clarify in Astro DB for the near term.

[mayank99]

While good documentation can help, I don't think this problem can be "documented away".

If you create-astro a fresh project, the CLI "recommends" using the strictest tsconfig. And then it goes ahead and creates a astro.config.mjs file. Later, when you astro add db, you get this type error. So it's a problem created by Astro (pun intended). Personally I don't even care about configuring TypeScript; I was just using the recommended flow and ended up in this sticky situation.

[bholmesdev]

@mayank99 Alright, discussed with the core team and we agree! I hadn't realized we enable allowJs in other tsconfigs already. We're adding allowJs to strictest to resolve.

[bholmesdev]

Verified this fixes the issue. It will go out in the next minor release, so hang tight for the next week. You can add allowJs: true to your tsconfig in the meantime.

[ZachSandersDev]

Thank you @bholmesdev and @Princesseuh! Glad to hear a fix is coming and the workarounds provided are working great in the meantime!

[huseeiin]

i have this problem using strict tsconfig, not strictest

[bholmesdev]

Hey @huseeiin! Sorry to hear that. Just curious, can you share your tsconfig.json?

[huseeiin]

Hey @huseeiin! Sorry to hear that. Just curious, can you share your tsconfig.json?

oh i fixed it. my tsconfig was:

{
  "extends": "astro/tsconfigs/strict",
  "include": ["src"]
}

i changed it to:

{
  "extends": "astro/tsconfigs/strict",
}

i added this line because astro check was checking dist edit: created #11671

[bholmesdev]

@huseeiin Ah ha, that’s what I expected. I would actually recommend setting your include array to [“src”, “astro.config.mjs”]. That should allow astro check to ignore your dist folder, but still respect types added by an integration.

[huseeiin]

@huseeiin Ah ha, that’s what I expected. I would actually recommend setting your include array to [“src”, “astro.config.mjs”]. That should allow astro check to ignore your dist folder, but still respect types added by an integration.

yeah but optimally astro should just ignore dist. i guess the best way would be to remove include (this way it includes everything) all together and just add exclude: ["dist"]

[huseeiin]

no, doing the exclude thing actually removed astro:actions types xD

[bholmesdev]

@huseeiin Ah, I believe that can work if you explicitly have "include": "." and "exclude": "dist". Exclude should have an include present. If that doesn't work, no problem!