Problem importing the metadata object

[davidelanfranchi]

Hi @JonasKruckenberg ,
I'm trying the plugin with a basic Vite + Svelte setup, scaffolded with @vite/create-app.
Thank you for your work, it's wonderful and it works well.

I encountered this issue using the metadata directive.

With this code:
import {src, width, height} from "$assets/images/usgs-AQ9-jKmebjM-unsplash.jpg?width=375&meta";

I get this error in console:
Uncaught SyntaxError: The requested module '/src/assets/images/usgs-AQ9-jKmebjM-unsplash.jpg?import&width=375&meta' does not provide an export named 'height'

Nonetheless, if I import as a single module the image:
import Meta from "$assets/images/usgs-AQ9-jKmebjM-unsplash.jpg?width=375&meta";

I get the correct metadata object.
//console.log(Meta);
{ "format": "jpeg", "width": 375, "height": 375, "channels": 3, "premultiplied": false, "size": 49715, "src": "node_modules/.cache/vite-imagetools/tmp/47fa4256/usgs-AQ9-jKmebjM-unsplash.jpeg" }

It's not a big deal, but it's something worth knowing, or maybe you have any hint about it.
I'm using the plugin with the force option as true, and the silent option as false.

✌️

[JonasKruckenberg]

What version of the plugin are you using? 3.1.0 or 3.4.0-next.3 ?
If you're not using 3.4.0-next.3 please check out the latest version from npm with npm install vite-imagetools@next and let me know if the issue is still present (Since @next is close to being released)

[JonasKruckenberg]

Because in version 3.1.0 the plugins usage of named exports (so that each property of the object also gets exported individually) is determined by the json.namedExports setting in your Vite-config (This option is true by default though)
In version 3.4.0-next.3 json.namedExports is still ignored, but considered a regression, so it will come back with 3.4.0-next.4!

[davidelanfranchi]

Hi Jonas,
I was using version 3.1.0, indeed.
I tried to use the 3.4.0-next.4, but I receive another error, and I could not test it.

failed to load config from /Users/davide/Documents/Code/svelte-vite/vite.config.js error when starting dev server: TypeError: (0 , import_vite_imagetools.imagetools) is not a function

[JonasKruckenberg]

Alright, after fighting the monorepo build setup for the weekend, I got a new version released 3.4.0-next.5 that should hopefully address this issue! Can you confirm the problem is gone @davidelanfranchi?

[davidelanfranchi]

Hi @JonasKruckenberg,
I just tried (3.4.0-next.7) and the destructured import works, but I had to explicitly set Vite json.namedExports setting as true.
OIn the contrary, I receive the same error, The requested module [...] does not provide an export named [...].

[JonasKruckenberg]

I just tried (3.4.0-next.7) and the destructured import works, but I had to explicitly set Vite json.namedExports setting as true.

This is weird, this should not be necessary since the json.namedExports options is true by default. https://vitejs.dev/config/#json-namedexports

OIn the contrary, I receive the same error, The requested module [...] does not provide an export named [...].
What import are we talking about? Importing the plugin in you config object or importing an image with metadata?

[davidelanfranchi]

I'm talking about the image with metadata (&meta directive).
I tried to set json.namedExports, although the default is true, because of your first answer, and it worked.

[JonasKruckenberg]

Alright yeah, it should work without explicitly setting that option too. I tried the svelte starter app as well, but I cannot reproduce the missing named import warning. Can you maybe share a reproduction or a code snippet showing how you imported the image?

[davidelanfranchi]

Hi @JonasKruckenberg ,
I created a reduced case and the metadata import worked perfectly.
I went back to my project and... It worked perfectly. ☺️

The issue is resolved.
Sorry for the misleading report, and thanks for your help!