Internal server error on fresh install

[jspn-creative]

I've experienced an issue in every repo I've tried to add this package to and just now had the time to try and reproduce it in a fresh install.

After installing as per the readme but without completing any of the steps under 'Usage' , running pnpm run dev results in an error for every image it finds that is not being handled by svelte-img.

Error output:

[vite] Internal server error: vite-imagetools cannot find image with id "adf11109c3e39fc0f54ebdd0129e7562f997daf9," this is likely an internal error
  at file://{/my-app}/node_modules/.pnpm/vite-imagetools@4.0.18/node_modules/vite-imagetools/dist/index.mjs:97:31
  at call (file://{/my-app}/node_modules/.pnpm/vite@4.2.1/node_modules/vite/dist/node/chunks/dep-79892de8.js:48904:7)
  at next (file://{/my-app}/node_modules/.pnpm/vite@4.2.1/node_modules/vite/dist/node/chunks/dep-79892de8.js:48848:5)
  at Function.handle (file://{/my-app}/node_modules/.pnpm/vite@4.2.1/node_modules/vite/dist/node/chunks/dep-79892de8.js:48851:3)
  at Server.app (file://{/my-app}/node_modules/.pnpm/vite@4.2.1/node_modules/vite/dist/node/chunks/dep-79892de8.js:48716:37)
  at Server.emit (node:events:513:28)

To reproduce:

1. Install Sveltekit: pnpm create svelte@latest my-app (I chose Typescript, ESLint, and Prettier integrations)
2. Install svelte-img: cd my-app && pnpm i -D @zerodevx/svelte-img
3. Edit vite.config.ts as per the readme
4. Run pnpm run dev

Is it intended behavior that this package doesn't allow users to import an image and NOT use it in an <Img> component? If every imported image is used in an <Img> tag the error(s) go away but doing so is not possible for my use case. Other than this small catch, I love the package! Thanks.

[zerodevx]

Is it intended behavior that this package doesn't allow users to import an image and NOT use it in an component?

Under the hood, importing images through the ?run query param generates customised data that should be utilised by the included <Img> component, so yes it comes as a pair.

You can however choose not to use the ?run preset, then behaviour will revert to standard vite-imagetools so you can write your img markup accordingly.

[jspn-creative]

You can however choose not to use the ?run preset, then behaviour will revert to standard vite-imagetools so you can write your img markup accordingly.

This sounds good, but in my experience is not actually the case.

I tested installing imagetools and using it in my project and importing an image without passing it any directives and it doesn't result in any errors. It works exactly as expected: it does nothing.

Just to be clear: in this scenario all of the imports are completely standard and don't have any parameters or even a ?.

• Using vite-imagetools as a plugin has no impact; it ignores all image imports since none of them have any directives.
• Using svelte-img throws an error for every image being imported, despite the absence of the ?run directive.

Does that make sense? Hope I'm conveying the issue properly. It seems like we're on the same page for expected behavior.

[zerodevx]

This sounds good, but in my experience is not actually the case.

Perhaps it's because defaultDirectives was set. Try clearing it with something like:

import { sveltekit } from '@sveltejs/kit/vite'
import { imagetools } from '@zerodevx/svelte-img/vite'

/** @type {import('vite').UserConfig} */
const config = {
  plugins: [
    sveltekit(),
    imagetools({
      defaultDirectives: () => new URLSearchParams('')
    })
  ]
}

export default config

My intention was definitely to revert to standard imagetools behaviour if the ?run query param is not used - might refactor to make it do so soon.

[jspn-creative]

That was indeed the issue. I went ahead and opened a PR as a 'good enough' solution for now, feel free to make any changes you would like or if you would prefer to refactor it yourself later then I'm happy to patch your package locally in the meantime. Thanks!