Can't add spotlight - Could not find a declaration file for module '@spotlightjs/spotlight'.

[bruno-garcia]

Can't add spotlight with direct import or with import under env var checking for treeshaking. Both cases the error is:

Could not find a declaration file for module '@spotlightjs/spotlight'. '/Users/bruno/git/nuget-trends/src/NuGetTrends.Web/Portal/node_modules/@spotlightjs/spotlight/dist/overlay.cjs' implicitly has an 'any' type.
  Try `npm i --save-dev @types/spotlightjs__spotlight` if it exists or add a new declaration (.d.ts) file containing `declare module '@spotlightjs/spotlight';`ts(7016)

Same with top level import:

Error: src/app/app.module.ts:11:28 - error TS7016: Could not find a declaration file for module '@spotlightjs/spotlight'. '/Users/bruno/git/nuget-trends/src/NuGetTrends.Web/Portal/node_modules/@spotlightjs/spotlight/dist/overlay.cjs' implicitly has an 'any' type.
  Try `npm i --save-dev @types/spotlightjs__spotlight` if it exists or add a new declaration (.d.ts) file containing `declare module '@spotlightjs/spotlight';`

11 import * as Spotlight from '@spotlightjs/spotlight';
                             ~~~~~~~~~~~~~~~~~~~~~~~~

Draft PR for repro: https://github.com/dotnet/nuget-trends/pull/247/files

[dcramer]

What bundler/etc is this using?

[bruno-garcia]

What bundler/etc is this using?

whatever Angular 15 uses 🤓 , webpack afaik

[bruno-garcia]

yeah: https://v5.angular.io/guide/webpack

[Shubhdeep12]

It seems like types for @spotlightjs/overlay and default types for @spotlightjs/spotlight were missing in package.json, causing this issue.

Added a draft PR for review, this will solve the issue.

thanks.

[bruno-garcia]

Thank you @Shubhdeep12 for the fix! If you want to hear rants about Spotlight you can find us at https://discord.com/channels/621778831602221064/1176977569678114847

[Shubhdeep12]

Thank you @Shubhdeep12 for the fix! If you want to hear rants about Spotlight you can find us at https://discord.com/channels/621778831602221064/1176977569678114847

Yeah, I checked this bug from the message only in the channel @bruno-garcia 😅

[bruno-garcia]

Thanks for fixing. Slapped contributor on ur profile :)

[airtonix]

has this been deployed yet? I'm following the guide, and here I am with this same error.

 yarn astro add @sentry/astro @spotlightjs/astro
Re-optimizing dependencies because vite config has changed
✔ Resolving packages...
08:56:41 
  Astro will run the following command:
  If you skip this step, you can always run it yourself later

 ╭───────────────────────────────────────────────────────────────╮
 │ npm install @sentry/astro@^7.98.0 @spotlightjs/astro@^1.0.10  │
 ╰───────────────────────────────────────────────────────────────╯

✔ Continue? … no
08:56:50   
   cancelled  Dependencies NOT installed.

  ▶ Be sure to install them manually before continuing!
08:56:50 
  Astro will make the following changes to your config file:

 ╭ astro.config.ts ──────────────────────────────────────────────────────╮
 │ import { defineConfig } from 'astro/config';                          │
 │ import react from '@astrojs/react';                                   │
 │ import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';  │
 │ import markdoc from '@astrojs/markdoc';                               │
 │ import sentry from '@sentry/astro';                                   │
 │ import spotlightjs from '@spotlightjs/astro';                         │
 │                                                                       │
 │ // https://astro.build/config                                         │
 │ export default defineConfig({                                         │
 │   // Enable React to support React JSX components.                    │
 │   integrations: [sentry(), spotlightjs(), react(), markdoc()],        │
 │   compressHTML: false,                                                │
 │   trailingSlash: 'never',                                             │
 │   build: {                                                            │
 │     format: 'directory'                                               │
 │   },                                                                  │
 │   vite: {                                                             │
 │     ssr: {                                                            │
 │       noExternal: ['@astrojs/react']                                  │
 │     },                                                                │
 │     plugins: [vanillaExtractPlugin()]                                 │
 │   }                                                                   │
 │ });                                                                   │
 ╰───────────────────────────────────────────────────────────────────────╯

✔ Continue? … yes
08:57:00   
   success  Added the following integrations to your project:
  - @sentry/astro
  - @spotlightjs/astro

zenobi.us/apps/web-with-astro on git feat/keystatic [xr!+?] via .NET via nodejs v18.17.0 
> cat ../../package.json  | grep sentry
    "@sentry/astro": "^7.98.0",

zenobi.us/apps/web-with-astro on git feat/keystatic [xr!+?] via .NET via nodejs v18.17.0 
> cat ../../package.json  | grep spotlight
    "@spotlightjs/astro": "^1.0.10",

[airtonix]

you guys might want to look at dropping release-please as your release automation. it'll answering my question easier:

[Lms24]

Hey @airtonix in your install log, I can see that the astro wizard tells you that the dependencies were in fact not installed. Have you tried re-running yarn install afterwards?

If the problem persists, please open a new issue as this one is about a different package and framework.

RE your tool suggestion: I don't see the advantage over changesets which we currently use. It also creates release/changelog PRs, highlighting all changes across package versions. We're quite happy with this tool so it's unlikely we'll make a switch.