unplugin-auto-import/vite can't use object's method in template

141 Views Asked by At

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

0

There are 0 best solutions below