Warn if user passes reference of svelte-image preprocessor to svelte.preprocess

[d4h0]

There are several issues where users report that srcset is empty – and unfortunately, I had the same problem.

The problem was the following code:

svelte({
  preprocess: svelteImage
})

Which should be:

svelte({
  preprocess: svelteImage(),
})

There is no error message if a user passes a reference to svelte preprocess. The image is shown, but srcset and so on are empty:

<img class="placeholder svelte-nldda5" src="images/mohamed-nohassi-odxB5oIG_iA-unsplash.jpg" alt="foo">
<picture>
	<source type="image/webp" srcset=""> 
	<source srcset=""> 
	<img class="main svelte-nldda5" alt="foo" srcset="" width="" height="" sizes="(max-width: 1000px) 100vw, 1000px">
</picture>

It would be nice if there was an error message that notifies users about the problem.

The problem, of course, was my stupidity, but this cost me much time.

Another way to reduce the likelihood of this happening would be to improve the following part of the readme:

svelte({
  preprocess: {
    ...image(),
  }
})

I didn't copy this snippet (and thereby introduced the bug) because this makes no sense. It should be something like this:

svelte({
  preprocess: image()
})

or:

svelte({
  preprocess: [
	image()
]})

[MatthiasGrandl]

Does this at all work when using svelte-preprocess? It seems like I can't use the array format like:

preprocess: [svelteImage(), sveltePreprocess()], because then sveltePreprocess stops working. If I use preprocess: {...svelteImage(), ...sveltePreprocess()} then svelte-image won't work as it's markup function is overridden... Am I missing something?

[briansteeleca]

I'm having the exact same problem as @MatthiasGrandl when trying to get it working with svelte-preprocess in Svelte + Rollup. If it's possible, could someone share an example config?

[victorcamnerin]

Yeah! Me too. Same issue as @MatthiasGrandl and @briansteeleca.

[Gh05d]

Anybody using this with autoPreprocess?

[ssec-dev]

Same issue here, anybody?

[ssec-dev]

Ah, this code work on Linux but not on Windows.

preprocess = [
	svelteImage({ ... }),
	sveltePreprocess({ ... }),
]

I see this PR maybe will fix this issue.

[elianiva]

I can't seem to make svelte-image works with svelte-preprocess for scss and postcss, the srcset is always empty. Am I missing something? I made a small repo to reproduce this issue here.

[janosh]

Also having this exact problem with a Sapper project. I am passing in not a reference but invoking the svelte-image default export but no srcset.

// rollup.config.js
import svelteImage from 'svelte-image'

export default {
  server: {
    // ...
    plugins: [
      svelte({
        generate: `ssr`,
        hydratable: true,
        dev,
        preprocess: svelteImage(), // <- is this wrong?
      }),
      // ...
    ],
    external: Object.keys(pkg.dependencies).concat(
      require(`module`).builtinModules
    ),
    preserveEntrySignatures: `strict`,
    onwarn,
  },
  // ...

}

[elianiva]

Also having this exact problem with a Sapper project. I am passing in not a reference but invoking the svelte-image default export but no srcset.

// rollup.config.js
import svelteImage from 'svelte-image'

export default {
  server: {
    // ...
    plugins: [
      svelte({
        generate: `ssr`,
        hydratable: true,
        dev,
        preprocess: svelteImage(), // <- is this wrong?
      }),
      // ...
    ],
    external: Object.keys(pkg.dependencies).concat(
      require(`module`).builtinModules
    ),
    preserveEntrySignatures: `strict`,
    onwarn,
  },
  // ...

}

did you pass the src as a dynamic value? e.g src={src} ? If so then I don't think it would work. It's an ongoing issue at the moment. In my case, I ended up just using svelte-waypoint to lazyload the image because using svelte-image with empty srcset kinda break its purpose. I still use svelte-image for blog posts because I can hardcode the src and it works just fine.

[janosh]

@elianiva Thanks for clearing this up. I'm indeed passing src as a variable. The fact that this is not supported should definitely be mentioned front and center in the readme.