search

sveltejs / sapper-template

Starter template for Sapper apps
703 stars 214 forks source link

Svelte-check returns error "Cannot find module" on image import when using TypeScript #281

Closed ehrencrona closed 4 years ago

ehrencrona commented 4 years ago

svelte-check reports an error when using TypeScript on the image imports used in the Sapper template project:

sapper-project/src/routes/index.svelte:2:25
Error: Cannot find module 'images/successkid.jpg' or its corresponding type declarations. (ts)
<script lang='ts'>
    import successkid from 'images/successkid.jpg';
</script>

The images are located in src/node_modules/images (since sveltejs/sapper-template#248). This is closely related to sveltejs/language-tools#610 but in this case it is svelte-check that reports an error whereas for sveltejs/language-tools#610 the error only displays in VSCode, so I suspect it's two different issues.

To Reproduce

npx degit "sveltejs/sapper-template#rollup" sapper-project
cd sapper-project
node scripts/setupTypeScript.js
yarn
yarn run build
yarn run validate

Ping @benmccann

Versions Svelte for VSCode v102.2.0 sapper template Sapper 0.28.10 Svelte 3.29.0 Svelte-check 1.0.59

dummdidumm commented 4 years ago

This is correct behavior. Typescript by default cannot deal with anything else than ts/js files.

You need to add an ambient module declaration to silence the error:

ambient.d.ts

declare module "*.png"

Also see https://stackoverflow.com/questions/51100401/typescript-image-import

ehrencrona commented 4 years ago

Can we move the ticket to sapper-template instead to add the declaration? It's not good that svelte-check returns an error on the default project.