Nuxt build error: UMD and IIFE output formats are not supported for code-splitting builds.

[fayazara]

Describe the bug Using with nuxt 3 works in dev environment, but breaks during the production build

Error: Nuxt Build Error: [commonjs--resolver] Invalid value "iife" for option "output.format" - UMD and IIFE output formats are not supported for code-splitting builds.

To Reproduce Steps to reproduce the behavior:

1. Create a new nuxt project and install any of the jsquash codecs
2. Handle the transpiling in nuxt config

   build: {
   transpile: [
     "@jsquash/png",
     "@jsquash/avif",
     "@jsquash/jpeg",
     "@jsquash/jxl",
     "@jsquash/oxipng",
     "@jsquash/png",
     "@jsquash/webp",
   ],
   },
   vite: {
   optimizeDeps: {
     exclude: [
       "@jsquash/avif",
       "@jsquash/jpeg",
       "@jsquash/jxl",
       "@jsquash/oxipng",
       "@jsquash/png",
       "@jsquash/webp",
     ],
   },
   },

3. run npm run build
4. See error

[fayazara]

Okay, I installed the single threaded versions of avif, jpegxl and oxipng and it seems to be working now

[fayazara]

Closing this

[jamsinclair]

Thanks for opening this issue @fayazara.

With the newer Vite versions (v5.2.2+) we shouldn't need the single threaded versions anymore.

Could you try add the following vite config to see if it fixes your build?

worker: {
    format: "es"
}

If you can confirm it, I'll update our README with the new information 👍

Edit: The full config may look like:

export default defineNuxtConfig({
  build: {
    transpile: [
      "@jsquash/png",
      "@jsquash/avif",
      "@jsquash/jpeg",
      "@jsquash/jxl",
      "@jsquash/oxipng",
      "@jsquash/png",
      "@jsquash/webp",
    ],
  },
  vite: {
    optimizeDeps: {
      exclude: [
        "@jsquash/avif",
        "@jsquash/jpeg",
        "@jsquash/jxl",
        "@jsquash/oxipng",
        "@jsquash/png",
        "@jsquash/webp",
      ],
    },
    worker: {
      format: "es"
    }
  },
});

[fayazara]

Works, thanks @jamsinclair