unplugin-auto-import not working in development without HMR

[rkh]

I think it used to work, but have been running with HMR working (via puma-dev proxy) for all latest development.

However, I was trying to run the app without HMR to see if it helps me get the CSS anchor polyfill working (which seems to be incompatible with HMR and vite-ruby).

However, I can't even run the app at all without the Vite dev server, as it is very unhappy about anything auto-imported:

Seeing many errors like this:

ReferenceError: computed is not defined

    setup https://pinto.test/vite-dev/assets/application-CTRXafke.js:1
    fn https://pinto.test/vite-dev/assets/vue-router-D81dezyU.js:5
    Ec https://pinto.test/vite-dev/assets/vue-router-D81dezyU.js:6
    co https://pinto.test/vite-dev/assets/vue-router-D81dezyU.js:6
    z https://pinto.test/vite-dev/assets/vue-router-D81dezyU.js:6
    q https://pinto.test/vite-dev/assets/vue-router-D81dezyU.js:6
    E https://pinto.test/vite-dev/assets/vue-router-D81dezyU.js:6
    U https://pinto.test/vite-dev/assets/vue-router-D81dezyU.js:6
    S https://pinto.test/vite-dev/assets/vue-router-D81dezyU.js:6
    x https://pinto.test/vite-dev/assets/vue-router-D81dezyU.js:6
    E https://pinto.test/vite-dev/assets/vue-router-D81dezyU.js:6
    U https://pinto.test/vite-dev/assets/vue-router-D81dezyU.js:6
    N https://pinto.test/vite-dev/assets/vue-router-D81dezyU.js:6
    E https://pinto.test/vite-dev/assets/vue-router-D81dezyU.js:6
    U https://pinto.test/vite-dev/assets/vue-router-D81dezyU.js:6
    S https://pinto.test/vite-dev/assets/vue-router-D81dezyU.js:6
    x https://pinto.test/vite-dev/assets/vue-router-D81dezyU.js:6
    E https://pinto.test/vite-dev/assets/vue-router-D81dezyU.js:6
    M https://pinto.test/vite-dev/assets/vue-router-D81dezyU.js:6
    run https://pinto.test/vite-dev/assets/pinto-B5T1O8KK.js:9
    B https://pinto.test/vite-dev/assets/vue-router-D81dezyU.js:6
    z https://pinto.test/vite-dev/assets/vue-router-D81dezyU.js:6
    q https://pinto.test/vite-dev/assets/vue-router-D81dezyU.js:6
    E https://pinto.test/vite-dev/assets/vue-router-D81dezyU.js:6
    H https://pinto.test/vite-dev/assets/vue-router-D81dezyU.js:6
    mount https://pinto.test/vite-dev/assets/vue-router-D81dezyU.js:6
    mount https://pinto.test/vite-dev/assets/vue-router-D81dezyU.js:10
    ir https://pinto.test/vite-dev/assets/mount-D3lwUbtv.js:2
    <anonymous> https://pinto.test/vite-dev/assets/application-CTRXafke.js:29
    bs https://pinto.test/vite-dev/assets/pinto-B5T1O8KK.js:9
[vue-router-D81dezyU.js:5:2007](https://pinto.test/vite-dev/assets/vue-router-D81dezyU.js)
    pl https://pinto.test/vite-dev/assets/vue-router-D81dezyU.js:5
    Vt https://pinto.test/vite-dev/assets/vue-router-D81dezyU.js:5
    fn https://pinto.test/vite-dev/assets/vue-router-D81dezyU.js:5
    Ec https://pinto.test/vite-dev/assets/vue-router-D81dezyU.js:6
    co https://pinto.test/vite-dev/assets/vue-router-D81dezyU.js:6
    z https://pinto.test/vite-dev/assets/vue-router-D81dezyU.js:6
    q https://pinto.test/vite-dev/assets/vue-router-D81dezyU.js:6
    E https://pinto.test/vite-dev/assets/vue-router-D81dezyU.js:6
    U https://pinto.test/vite-dev/assets/vue-router-D81dezyU.js:6
    S https://pinto.test/vite-dev/assets/vue-router-D81dezyU.js:6
    x https://pinto.test/vite-dev/assets/vue-router-D81dezyU.js:6
    E https://pinto.test/vite-dev/assets/vue-router-D81dezyU.js:6
    U https://pinto.test/vite-dev/assets/vue-router-D81dezyU.js:6
    N https://pinto.test/vite-dev/assets/vue-router-D81dezyU.js:6
    E https://pinto.test/vite-dev/assets/vue-router-D81dezyU.js:6
    U https://pinto.test/vite-dev/assets/vue-router-D81dezyU.js:6
    S https://pinto.test/vite-dev/assets/vue-router-D81dezyU.js:6
    x https://pinto.test/vite-dev/assets/vue-router-D81dezyU.js:6
    E https://pinto.test/vite-dev/assets/vue-router-D81dezyU.js:6
    M https://pinto.test/vite-dev/assets/vue-router-D81dezyU.js:6
    run https://pinto.test/vite-dev/assets/pinto-B5T1O8KK.js:9
    B https://pinto.test/vite-dev/assets/vue-router-D81dezyU.js:6
    z https://pinto.test/vite-dev/assets/vue-router-D81dezyU.js:6
    q https://pinto.test/vite-dev/assets/vue-router-D81dezyU.js:6
    E https://pinto.test/vite-dev/assets/vue-router-D81dezyU.js:6
    H https://pinto.test/vite-dev/assets/vue-router-D81dezyU.js:6
    mount https://pinto.test/vite-dev/assets/vue-router-D81dezyU.js:6
    mount https://pinto.test/vite-dev/assets/vue-router-D81dezyU.js:10
    ir https://pinto.test/vite-dev/assets/mount-D3lwUbtv.js:2
    <anonymous> https://pinto.test/vite-dev/assets/application-CTRXafke.js:29
    bs https://pinto.test/vite-dev/assets/pinto-B5T1O8KK.js:9

unplugin-auto-import config looks like this:

AutoImport({
  include: [/\.vue$/],
  imports: ['vue', 'vue-router'],
  dirs: ['./composables/**'],
  dts: './auto-imports.d.ts',
}),

All works fine with the Vite dev server running.

Any ideas?

[ElMassimo]

Hi Konstantin!

I'm using the same plugin in my projects, with the difference that I don't configure dirs.

The runtime error suggests that in build mode, the relevant files are not being transformed, so the imports are not added.

It might be related to how the plugin resolves relative dirs such as ./composables, try using resolve on the paths you provide, and see if that addresses the problem:

import { resolve } from 'node:fs'

const composablesDir = resolve(__dirname, 'app/frontend/composables')

...

dirs: [`${composablesDir}/**'],

[rkh]

Thanks for the hint! Will try. Note thought that the issue occurs with a function auto-imported from Vue itself, not from one of our composables.

[rkh]

Figured it out, needed to include ts/js files, not just vue files.