Astro import using wrong types

[nblackburn]

I have been having issues integrating this library for a while now due to some issues in how types are being resolved, which doesn't play nicely with astro check. It looks like some attempts have been made to fix this, but sadly this issue still persists for me.

src/layouts/base.astro:89:10 - error ts(2604): Component 'SpeedInsights' is not a valid component.

If this is a Svelte or Vue component, it might have a syntax error that makes it impossible to parse.

89         <SpeedInsights />
            ~~~~~~~~~~~~~

I have noticed that the Astro version is missing from typesVersions and doesn't have a index.d.ts file, which appears to lead it to default back on index.d.ts under ./dist which is not an Astro component.

Related: #36 #54

[ViorelMocanu]

I'm having the same issue.

[alexkazachkov]

The only thing so far that worked reliably for me was adding that comment:

<!-- @ts-expect-error Vercel Speed Insights types are missing -->
<SpeedInsights />

I also tried to properly declare the component, but it only worked when rewriting my project's tsconfig.json as well.

Here is my fork with the changes I made.

And here is the tsconfig.json I used in my project to get rid of the error:

{
  "extends": "astro/tsconfigs/strict",
  "compilerOptions": {
    "moduleResolution": "node16",
    "module": "esnext",
    "target": "es2020",
    "baseUrl": ".",
    "paths": {
      "@vercel/speed-insights/astro": ["node_modules/@vercel/speed-insights/dist/astro/*"],
      "@vercel/speed-insights/*": ["node_modules/@vercel/speed-insights/dist/*"]
    },
    "types": [
      "astro/client"
    ],
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true
  },
  "include": [
    "src/**/*",
    "src/**/**/*"
  ]
}

The addition of "moduleResolution": "node16" and "paths" seemed to resolve this issue. But this is so highly specific that I now just go with <!-- @ts-expect-error --> suppression.