Astro - Cannot find module '@vercel/speed-insights/astro' on import

ref-thomasledoux1 commented 6 months ago

When I try to import the Astro package, I get a TS error:

Cannot find module '@vercel/speed-insights/astro' or its corresponding type declarations.ts(2307)

Code in .astro file: import SpeedInsights from "@vercel/speed-insights/astro";

File can be found here: https://github.com/thomasledoux1/website-thomas-astro/blob/main/src/layouts/Layout.astro

alexbouchardd commented 6 months ago

Same here. Package seems to be missing from https://github.com/vercel/speed-insights/blob/7b12c7362c0801c124025e719bd59e8a1af8ca1b/packages/web/tsup.config.js#L12

feugy commented 5 months ago

Hello gents and thank you for this bug report.

I did not managed to reproduce the error. I've setup a basic Astro application:

> pnpm create astro@latest

 astro   Launch sequence initiated.

   dir   Where should we create your new project?
         ./speed-insights-issue-36

  tmpl   How would you like to start your new project?
         Include sample files

  deps   Install dependencies?
         Yes

    ts   Do you plan to write TypeScript?
         No
      ◼  No worries! TypeScript is supported in Astro by default,
         but you are free to continue writing JavaScript instead.

   git   Initialize a new git repository?
         No
      ◼  Sounds good! You can always run git init manually.

      ✔  Project initialized!
         ■ Template copied
         ■ Dependencies installed

  next   Liftoff confirmed. Explore your project!

         Enter your project directory using cd ./speed-insights-issue-36
         Run pnpm dev to start the dev server. CTRL+C to stop.
         Add frameworks like react or tailwind using astro add.

         Stuck? Join us at https://astro.build/chat

╭─────╮  Houston:
│ ◠ ◡ ◠  Good luck out there, astronaut! 🚀
╰─────╯

> cd speed-insights-issue-36

> pnpm i @vercel/speed-insights
Packages: +1
+
Progress: resolved 450, reused 416, downloaded 0, added 1, done

dependencies:
+ @vercel/speed-insights 1.0.2

Done in 906ms

Then in src/layouts/Layout.astro I added:

---
import SpeedInsights from '@vercel/speed-insights/astro'; // <---- added

interface Props {
  title: string;
}

const { title } = Astro.props;
---

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="description" content="Astro description" />
    <meta name="viewport" content="width=device-width" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="generator" content={Astro.generator} />
    <title>{title}</title>
  </head>
  <body>
    <slot />
    <SpeedInsights />  <!-- <---- added -->
  </body>
</html>

Finally, running pnpm dev and visiting the site works seamlessly.

@alexbouchardd the astro component export is properly defined in packages/web/package.json.

The types are not, indeed, but we're considering replacing Tsup, so we'll get that fix during the migration.

mingjunlu commented 5 months ago

Hi @feugy, I've created a minimal reproduction repo for your reference.

Steps to reproduce:

git clone git@github.com:mingjunlu/speed-insights-issue-36.git
cd speed-insights-issue-36
pnpm install
pnpm run build

After running pnpm run build, you'll see some error message like this:

src/pages/index.astro:2:27 - error ts(2307): Cannot find module '@vercel/speed-insights/astro' or its corresponding type declarations.

2 import SpeedInsights from '@vercel/speed-insights/astro';
                            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Result (3 files): 
- 1 error
- 0 warnings
- 0 hints

 ELIFECYCLE  Command failed with exit code 1.

feugy commented 5 months ago

Thanks for the reproduction! It's the astro check which doesn't like it. Until we fix it, you could use pnpm exec astro build to build your application.

feugy commented 5 months ago

We've released version 1.0.4 which fixes the issue. Happy coding!

vercel / speed-insights

Astro - Cannot find module '@vercel/speed-insights/astro' on import #36