All questions

Added a new slot in the dashboard, TypeScript says the slot ID does not exist

Asked by Josh Whitcomb on

JWJosh Whitcomb

Created a promo-banner slot in the dashboard ten minutes ago, referenced it in code, and tsc is having none of it:

error TS2344: Type '"promo-banner@1"' does not satisfy the constraint'VersionedSlotId'.

We run strict everything so I can't just cast my way out (nor would I want to). I assume there is codegen somewhere that hasn't heard the news. What is the blessed way to refresh it, and more importantly, how do I stop every dev on teh team from tripping over this individually?

Was this helpful?

1 answer

CFCamille Fournier-BlancAccepted answer

Your read is right: slots.d.ts is generated by the CLI and it does not watch the dashboard. Creating a slot in the UI changes nothing on disk until you regenerate.

For the immediate fix, run:

npx croct@latest add slot

and pick promo-banner. That registers the slot in croct.json5 and regenerates the declarations, so SlotContent<'promo-banner@1'> starts compiling.

For the team-wide problem, two habits solve it:

  1. Commit the regenerated slots.d.ts. It is generated code, but committing it means checkouts and CI builds type-check without needing an API fetch.
  2. Run npx croct install once in the repo. It registers a postinstall hook that keeps the types in sync for everyone else on npm install, so the person who adds the slot is the only one who has to think about it.

After that, a stale-types incident requires someone to both add a slot and forget to commit, which code review catches.

Was this helpful?
JWJosh Whitcomb

Regenerated, committed, postinstall hook added. Compiler is appeased. Codegen that has to be manually poked will never not annoy me, but at least the hook makes it someone else's problem exactly once.

Still have questions?