Sometimes auto import isn't working with custom resolvers

[jd-solanki]

Describe the bug

Hi,

Thanks for creating this amazing unplugin. This is very helpful.

We have created a small utility function dynamicImgImport which let us import the images without importing them in script block. This is just like the require we had in vue 2.

The Problem

The problem I am facing is really weird. Sometimes it imports the dynamicImgImport and renders the image correctly and sometimes it just throws an error like the below:

Error on stackblitz:

Reproduction

https://stackblitz.com/github/jd-solanki/unplugin-auto-import-demo?file=README.md https://github.com/jd-solanki/unplugin-auto-import-demo

System Info

System:
    OS: macOS 12.5.1
    CPU: (8) arm64 Apple M1
    Memory: 93.19 MB / 8.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.16.0 - ~/.nvm/versions/node/v16.16.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v16.16.0/bin/yarn
    npm: 8.11.0 - ~/.nvm/versions/node/v16.16.0/bin/npm
  Browsers:
    Chrome: 104.0.5112.101
    Safari: 15.6.1

Used Package Manager

yarn

Validations

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guide.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• [X] The provided reproduction is a minimal reproducible of the bug.

[jd-solanki]

Moreover, if you use script version of dynamicImgImport:

<script setup>
const avatar1 = dynamicImgImport('@/assets/images/avatars/avatar-1.png')
</script>

<template>
    <img :src="avatar1" alt="avatar">
    <!-- <img :src="dynamicImgImport('@/assets/images/avatars/avatar-1.png')" alt="avatar" /> -->
    <!-- <img :src="dynamicImgImport('@/assets/images/avatars/avatar-2.png')" alt="avatar" /> -->
</template>

it works correctly.

[azaleta]

I consider this as a limitation. The auto-import concept is

1. parsing source and get all things need to import
2. generate a dts file (for output of step 1)
3. for some case you do need to use these imports in vue template, config file contains a vueTemplate: true →　This will generate a declare module '@vue/runtime-core' part in dts file (also for output of step 1)

In your use case, you want to use a func only in vue template and skip the script section. This will cause 1. parsing source and get all things need to import fails.(Currently only scan typescript part so vue template will be out of range) https://github.com/unjs/unimport/blob/2044d7cfd373bb91fc57f548a5c16d895db15832/src/context.ts#L124

so step3 could not know what is the function you are using.

If you really want to do so. I think first keep script like:

<script setup>
const avatar1 = dynamicImgImport('@/assets/images/avatars/avatar-1.png')
</script>

run vite -> this will auto genarate dts file contains vue template usable declaration.

and then change config to dts:false modify the code back to

<script setup>
//const avatar1 = dynamicImgImport('@/assets/images/avatars/avatar-1.png')
</script>
<template>
<img :src="dynamicImgImport('@/assets/images/avatars/avatar-1.png')" alt="avatar" />
</template>

it should works