vercel/speed-insights

Using Vercel speed insights in Astro

thecoshopteam opened this issue · 1 comments

thecoshopteam commented

Hey, I installed the @vercel/speed-insights package with npm and tried to add the component to my BaseHead.astro:

---
import SpeedInsights from "@vercel/speed-insights/astro";
---

<head>
  ...

  <SpeedInsights />
</head>

But when I add it, the import gets linted and says "Cannot find module '@vercel/speed-insights/astro' or its corresponding type declarations."

This is my package.json:

{
  "name": "...",
  "type": "module",
  "private": true,
  "scripts": {
    "dev": "astro dev",
    "build": "astro build",
    "preview": "astro preview",
    "astro": "astro",
  },
  "dependencies": {
    "@astrojs/vercel": "^7.1.1",
    "@vercel/speed-insights": "^1.0.9",
    "astro": "^4.2.8",
     ...
  },
}

How do I fix it? I followed Vercel's guide exactly and there's an issue.

I tried to see if I could import SpeedInsights from "@vercel/speed-insights";
And though the linting goes away on that line, I now get linted on the component line:

<SpeedInsights />

_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.ts(2604)
(alias) const SpeedInsights: {
injectSpeedInsights: typeof injectSpeedInsights;
computeRoute: typeof computeRoute;
}
import SpeedInsights_

A friend on Discord says that looking at the package, it looks like it's not packaged correctly, the types point to a file that doesn't exist.

lucas-mancini commented

Hi, I'm having the same issue. It currently does not work with "@vercel/speed-insights": "^1.0.9" and "astro": "^4.3.6".

Apparently this was fixed in #41, but I'm still experiencing the issue.