vercel / speed-insights

Vercel Speed Insights package
https://vercel.com/docs/speed-insights
Apache License 2.0
57 stars 9 forks source link

Using Vercel speed insights in Astro #54

Closed thecoshopteam closed 7 months ago

thecoshopteam commented 7 months ago

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 7 months ago

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 https://github.com/vercel/speed-insights/pull/41, but I'm still experiencing the issue.