Works in dev, build fails with `Unknown variable dynamic import` about imagetools

[gw2princeps]

Hey,

we've kind of solved this issue (partly) as follows:

vite.config.js

const directives = {
  imagecardPreview: new URLSearchParams(
    'format=webp;jpg&width=438&height=250&position=entropy&quality=60&meta',
  ),
};

imagetools({
      include: '**/*.{heic,heif,avif,jpeg,jpg,png,tiff,webp,gif}*',
      defaultDirectives: (id) => {
        // scan images without search params. These kind of images might be
        // imported dynamically, where search params wont work.
        if (id.search === '') {
          if (id.pathname.includes('discretize-guides/guides/')) {
            return directives.imagecardPreview;
          }
        }
        return id.searchParams;
      },
})

You don't add any search params to the imported picture at all, but instead do "the work" in the defaultDirectives.

Maybe this piece of info could help you to create a solution for your problem?

[marcustyphoon]

I believe this would potentially also be fixed by @rollup/plugin-dynamic-import-vars stripping query strings before it tries to use your template string as a glob to resolve all possible files you could be importing, then appending them again afterwards.

If this type of "query string in file import" path pattern is common, perhaps that would be a reasonable feature request for rollup/plugins?

[benmccann]

This is how Vite works and really isn't specific to imagetools at all. Vite can only handle static strings in imports and not dynamically constructed strings. Given that there isn't anything we can do about this in imagetools, I'm going to go ahead and close this

[benmccann]

Although I guess it's supposed to work in some cases: https://vitejs.dev/guide/assets.html#new-url-url-import-meta-url. However, that case would be covered by #327, so I'll leave this closed in favor of that issue.