How to apply resolve.extensions for dependencies?

[hyperstown]

Hi I'm migrating some older vue 2 project from webpack to vite. Everything seems to work except one thing that I can't just solve on my own.
My projects depends on vue-upload-multiple-image which is just a few vue components and I import it like this:

import VueUploadMultipleImage from "vue-upload-multiple-image";

Now the issue I get is:

✘ [ERROR] Could not resolve "./components/VueUploadMultipleImage"

    node_modules/vue-upload-multiple-image/src/main.js:3:35:
      3 │ import VueUploadMultipleImage from './components/VueUploadMultipleImage'

It seems that vite can't find this component because of lack of file extension. When I go to node_modules/vue-upload-multiple-image/src/main.js And edit that line to add .vue it compiles no problem.

I read about resolve.extensions so I added .vue to the list in my config but it didn't work. It works in source code but it doesn't in dependencies.

My config:

export default defineConfig({
  plugins: [
    vue2(),
    Components({
      resolvers: [
        VuetifyResolver(),
      ],
    }),
    legacy({
      targets: ['ie >= 11'],
      additionalLegacyPolyfills: ['regenerator-runtime/runtime']
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
    extensions: ['.vue', '.mjs', '.js', '.mts', '.ts', '.jsx', '.tsx', '.json'],
  },
  server: {
    proxy: {
      "/api": BASE_PROXY_CONFIG,
      //"/static": BASE_PROXY_CONFIG,
    },
  },
})

I tried several versions on vite from 3.x to 5.x and none worked.

[hi-ogawa]

I'm guessing the error is from esbuild / deps optimization and this is not necessary about resolve.extensions. Can you try optimizeDeps.exclude: ["vue-upload-multiple-image"]?

[hyperstown]

Kinda late but anyway, here is a solution I ended up with:

imports:

-import VueUploadMultipleImage from 'vue-upload-multiple-image'
+import VueUploadMultipleImage from "vue-upload-multiple-image/src/components/VueUploadMultipleImage.vue";

vite.config.js

optimizeDeps: {
    exclude: ['vue-image-lightbox-carousel'],
    include: ['vue-awesome-swiper']
  },

Since package used both imports with and without extensions I had to specify each dependency in include and exclude.
Thanks @hi-ogawa for the hint!