Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[astro-when] Type Errors for some gosh darn reason #156

Closed
ZachHandley opened this issue Aug 31, 2024 · 5 comments · Fixed by #157
Closed

[astro-when] Type Errors for some gosh darn reason #156

ZachHandley opened this issue Aug 31, 2024 · 5 comments · Fixed by #157

Comments

@ZachHandley
Copy link

ZachHandley commented Aug 31, 2024

https://stackblitz.com/edit/github-4vqrvw?file=astro.config.mjs

I keep getting type errors when installing (hah) and trying to use astro-when, am I doing something wrong? I didn't add the env.d.ts //reference types to this one, but on my new project I have the same error even with the reference types

@Fryuni
Copy link
Owner

Fryuni commented Sep 2, 2024

The types for the virtual modules rely on TS side-effect loading logic, which seems to only be working when your Astro config is a TS file (.ts or .mts). If you change the name of the file or add the //reference directive it will load the types.

I plan to fix this, so I'll leave this issue open for tracking.

With the types loaded, you'll still see two other type errors on the code you sent; those errors are correct and point to mistakes in the code.

The first one is this:

const middlewares: Record<When, MiddlewareHandler> = {
  [When.Client]: (context, next) => handleRequest(context, next),
  [When.DevServer]: (_, next) => next(),
  [When.Server]: (_, next) => next(),
};

The type Record<When, MiddlewareHandler> maps the possible When values to middleware handlers. When the key in a mapping is a type with a finite set (an enum or a union of literals), TS requires the mapping to be exhaustive. This means you have to set an entry to all possible When values, not just 3 of them.
If you only want to define those 3, you need to use Partial<Record<When, MiddlewareHandler>>.

The second error is this:

export const onRequest = defineMiddleware(middlewares[whenAmI()]);

whenAmI is a constant of type When, it is not a function. It should be this:

- export const onRequest = defineMiddleware(middlewares[whenAmI()]);
+ export const onRequest = defineMiddleware(middlewares[whenAmI]);

If you switch to Partial on the first problem, then this line will also have to handle the missing cases:

const noopMiddleware = defineMiddleware((_, next) => next());

export const onRequest = defineMiddleware(middlewares[whenAmI] ?? noopMiddleware);

@ZachHandley
Copy link
Author

ZachHandley commented Sep 3, 2024

Gotcha, but in this case I do have those reference types

image

I didn't add them to the stackblitz, but I have been trying this for a minute. This fix worked for my other project, but not for this one, and my astro.config.mts is here in the screenshot

image

@Fryuni
Copy link
Owner

Fryuni commented Sep 3, 2024

That is not the behavior on the repro. Can you share your tsconfig.json? It might be different from the template.

I know isolatedModules cause this problem, but I don't know how it could be made to work since not computing the type in this case is kinda of the point of that flag

@ZachHandley
Copy link
Author

{
  "extends": "astro/tsconfigs/strict",
  "include": ["src/**/*", ".astro/**/*.ts", ".astro/**/*.d.ts"],
  "exclude": ["dist", "functions", "node_modules"],
  "compilerOptions": {
    "jsx": "preserve",
    "baseUrl": ".",
    "moduleResolution": "Bundler",
    "paths": {
      "appwrite": ["node_modules/appwrite"],
      "@/*": ["src/*"],
      "@appwrite/*": ["src/appwrite/*"],
      "@assets/*": ["src/assets/*"],
      "@constants/*": ["src/constants/*"],
      "@components/*": ["src/components/*"],
      "@layouts/*": ["src/layouts/*"],
      "@pages/*": ["src/pages/*"],
      "@server/*": ["src/server/*"],
      "@utils/*": ["src/utils/*"],
      "@stores/*": ["src/stores/*"],
      "@vue/*": ["src/components/vue/*"]
    }
  }
}

@Fryuni
Copy link
Owner

Fryuni commented Sep 4, 2024

Okay, I managed to reproduce. TS is not loading your Astro config because it doesn't match any of the include values.

Adding it there made my reproduction work.


In parallel, I opened #157 which will use Astro's new injectTypes to load the type definitions from the .astro folder structure

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants