When using unplugin-auto-import in a Vite project to automatically import dependencies, the _.isArray function from a file (src/utils/lodash.ts) is working correctly in the script context but fails in the template.
Minimal code:
<script setup lang="ts">
console.log(isArray) // this works
</script>
<template>
{{ _.isArray }} <!-- this doesn't work -->
</template>
The issue manifests as follows:
In the script section (), _.isArray is correctly imported and works as expected.
In the template section (), _.isArray results in unexpected behavior.
Index.vue?t=1706181696036:54 TypeError: (intermediate value)(intermediate value)(intermediate value).isArray is not a function
at Proxy._sfc_render (Index.vue:34:1)
at renderComponentRoot (chunk-Z55UPKXR.js?v=d34c77c8:2318:17)
at ReactiveEffect.componentUpdateFn [as fn] (chunk-Z55UPKXR.js?v=d34c77c8:7535:26)
at ReactiveEffect.run (chunk-Z55UPKXR.js?v=d34c77c8:421:19)
at instance.update (chunk-Z55UPKXR.js?v=d34c77c8:7588:17)
at chunk-Z55UPKXR.js?v=d34c77c8:1923:14
at Array.forEach (<anonymous>)
at rerender (chunk-Z55UPKXR.js?v=d34c77c8:1915:25)
at Object.rerender (chunk-Z55UPKXR.js?v=d34c77c8:1981:14)
at Index.vue?t=1706181696036:54:25
Folder Structure:
project-root
│── src
│ │── utils
│ │ └── lodash.ts
│ │── components
│ │── ExampleComponent.vue
│── vite.config.ts
│── package.json
vite.config.ts
import AutoImport from 'unplugin-auto-import/vite';
import { resolve } from 'path';
export default {
plugins: [
AutoImport({
imports: ['vue', 'vue-router', '@vueuse/core', '@vueuse/math', 'pinia'],
vueTemplate: true,
dirs: [
resolve(__dirname, 'src/utils/**'),
resolve(__dirname, 'src/composables/**'),
resolve(__dirname, 'src/config/**'),
],
}),
],
};
System Info
System:
OS: Linux 6.5 Ubuntu 22.04.3 LTS 22.04.3 LTS (Jammy Jellyfish)
CPU: (24) x64 13th Gen Intel(R) Core(TM) i7-13700K
Memory: 24.52 GB / 31.08 GB
Container: Yes
Shell: 5.8.1 - /usr/bin/zsh
Binaries:
Node: 18.18.2 - ~/.nvm/versions/node/v18.18.2/bin/node
Yarn: 1.22.21 - ~/.nvm/versions/node/v18.18.2/bin/yarn
npm: 9.8.1 - ~/.nvm/versions/node/v18.18.2/bin/npm
pnpm: 8.10.5 - ~/.nvm/versions/node/v18.18.2/bin/pnpm
Browsers:
Brave Browser: 120.1.61.120
Chromium: 120.0.6099.224
Used Package Manager
npm
updated package versions