@snowpack/app-template-svelte-typescript: "Property 'hot' does not exist" error

[plibither8]

Hi. I created a new Snowpack-Svelte-Typescript app using CSA, installed the modules, and was initially greeted with this error:
src/index.ts(1,17): error TS2307: Cannot find module './App.svelte' or its corresponding type declarations.

I fixed it by troubleshooting on StackOverflow, and finally adding "extends": "@tsconfig/svelte/tsconfig.json", to the tsconfig.json file. But now, the following error comes up:

src/index.ts(11,17): error TS2339: Property 'hot' does not exist on type 'ImportMeta'.

I have no clue how to go about solving this - I'm pretty new to TypeScript and was going to explore TS in this project. Otherwise, the app itself seems to build fine.

How should I proceed? Thanks :)

[melissamcewen]

Hi @plibither8 that does look super frustrating. I'm going to be writing some docs/guides on TS and Svelte so hopefully I can debug this error in the process. If you have any code available on GitHub that might be helpful.

[plibither8]

Hi! I'll try to quickly create a repro and link it, hopefully EOD.

[FredKSchott]

Installing @types/snowpack-env in your project should help! This should be a dependency of the svelte-typescript template already though, so I'm curious why you'd be seeing this error

[plibither8]

I didn't change anything configuration-ally, just did a simple npm install. Not sure either why the error should occur. I'll try a fresh installation again soon

[fhassis]

To fix the error of ImportMeta, add the following interface in "types/static.d.ts":

interface ImportMeta {
    // TODO: Import the exact .d.ts files from "esm-hmr"
    // https://github.com/pikapkg/esm-hmr
    hot: any;
}

[Alfagun74]

Or just rename

declare global {
  interface ImportMeta {

to

declare global {
  interface ImportMetaHot {

[CedricDumont]

note: I came around as I encountered the same issue:
as stated by @plibither8 : he extended his tsconfig.json with : "extends": "@tsconfig/svelte/tsconfig.json"
in that file, there is an option: "types": ["svelte"], which overrides the default : look for all visible types.
so just replace the types option entry with "types": ["svelte", "@types/snowpack-env"],

[amirsaeed671]

we can write like this "types": ["svelte", "snowpack-env"] as well