Error: ENOENT: no such file or directory

[mubaidr]

Steps to reproduce

Install unplugin-imagemin dep
Add to vite.config with defaults

What is expected?

Should work without errors

What is actually happening?

node:internal/fs/promises:638
  return new FileHandle(await PromisePrototypeThen(
                        ^

Error: ENOENT: no such file or directory, open '/projects/browser-extension/dist/chrome/assets/index-Bv3GNhM-.css'
    at async open (node:internal/fs/promises:638:25)
    at async Object.writeFile (node:internal/fs/promises:1208:14)
    at async file:///projects/browser-extension/node_modules/.pnpm/unplugin-imagemin@0.5.20_rollup@4.21.0/node_modules/unplugin-imagemin/dist/chunk-YDJJXI4H.mjs:2129:5 {
  errno: -2,
  code: 'ENOENT',
  syscall: 'open',
  path: '/projects/browser-extension/dist/chrome/assets/index-Bv3GNhM-.css'
}

System Info

Linux
Vue
Vite

Any additional comments?

vue(),

imagemin({}), // {} because imagemin won't allow optional defaults

[ErKeLost]

Can you provide a reproduce demo

[mubaidr]

Sure, this is my vite config:

import fs from 'node:fs'
import { URL, fileURLToPath } from 'node:url'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import IconsResolver from 'unplugin-icons/resolver'
import Icons from 'unplugin-icons/vite'
import imagemin from 'unplugin-imagemin/vite'
import Components from 'unplugin-vue-components/vite'
import VueRouter from 'unplugin-vue-router/vite'
import { defineConfig } from 'vite'
import { defineViteConfig as define } from './define.config'
import vueDevTools from 'vite-plugin-vue-devtools'
import TurboConsole from 'unplugin-turbo-console/vite'
import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'
import path from 'node:path'
import 'dotenv/config'

const PORT = Number(process.env.PORT || '') || 3303

function getImmediateDirectories(dirPath: string): string[] {
  try {
    // Read the directory contents synchronously
    const items = fs.readdirSync(dirPath, { withFileTypes: true })

    // Filter and map to get only directory names
    return items
      .filter((item): item is fs.Dirent => item.isDirectory()) // Type guard
      .map((item) => item.name)
  } catch (err) {
    throw new Error(`Error reading directories: ${(err as Error).message}`)
  }
}

// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('src', import.meta.url)),
      '~': fileURLToPath(new URL('src', import.meta.url)),
      src: fileURLToPath(new URL('src', import.meta.url)),
      '@assets': fileURLToPath(new URL('src/assets', import.meta.url)),
    },
  },

  plugins: [
    VueI18nPlugin({
      include: [path.resolve(__dirname, './src/locales/**')],
    }),

    vueDevTools(),

    // https://github.com/posva/unplugin-vue-router
    VueRouter({
      dts: 'src/types/typed-router.d.ts',
      routesFolder: getImmediateDirectories('src/ui').map((dir) => {
        return {
          src: `src/ui/${dir}/pages`,
          path: `${dir}/`,
        }
      }),
    }),

    vue(),

    imagemin({}),

    TurboConsole(),

    // https://github.com/unplugin/unplugin-auto-import
    AutoImport({
      imports: [
        'vue',
        'vue-router',
        '@vueuse/core',
        {
          'webextension-polyfill': [['*', 'browser']],
        },
      ],
      dts: 'src/types/auto-imports.d.ts',
      dirs: ['src/composables/', 'src/stores/', 'src/utils/'],
      vueTemplate: true,
      viteOptimizeDeps: true,
      eslintrc: {
        enabled: true,
        filepath: 'src/types/.eslintrc-auto-import.json',
      },
    }),

    // https://github.com/antfu/unplugin-vue-components
    Components({
      dirs: ['src/components'],
      // generate `components.d.ts` for ts support with Volar
      dts: 'src/types/components.d.ts',
      resolvers: [
        // auto import icons
        IconsResolver(),
      ],
    }),

    // https://github.com/antfu/unplugin-icons
    Icons({
      autoInstall: true,
      compiler: 'vue3',
      scale: 1.5,
    }),
  ],

  build: {
    rollupOptions: {
      // ui or pages that are not specified in manifest file need to be specified here
      input: {
        iframe: 'src/ui/content-script-iframe/index.html',
        setup: 'src/ui/setup/index.html',
      },
    },
  },

  server: {
    port: PORT,
    hmr: {
      host: 'localhost',
    },
    origin: `http://localhost:${PORT}`,
  },

  optimizeDeps: {
    include: ['vue', '@vueuse/core', 'webextension-polyfill'],
    exclude: ['vue-demi'],
  },

  define,
})