Missing "./runtime" specifier in "@nuxt/image" package

[X-Cotang]

When attempting to create a custom image provider with @nuxt/image in a Nuxt 4 project, an import error occurs while trying to import createOperationsGenerator and defineProvider from @nuxt/image/runtime. The error is as follows:

[plugin:vite:import-analysis] Missing "./runtime" specifier in "@nuxt/image" package
D:/Project/my-frontend/providers/my-provider.ts:2:58
1  |  import { joinURL } from "ufo";
2  |  import { createOperationsGenerator, defineProvider } from "@nuxt/image/runtime";
   |                                                             ^
3  |  
4  |  import { useRuntimeConfig } from '#app/nuxt';

[davidurco]

Same here with Nuxt 4.

[davidurco]

@X-Cotang I guess temp solution would be to add vite.resolve.alias '@nuxt/image/runtime': fileURLToPath(new URL('./node_modules/@nuxt/image/dist/runtime.mjs', import.meta.url)),

or

use v2 alpha where this is fixed already.

[EnjoyKojima]

I tried both workarounds, but the error did not resolve in my environment.
Instead, I used the following workaround and resolved the error.

import { fileURLToPath } from 'node:url'

export default defineNuxtConfig({
  // other settings...

  alias: {
    '@nuxt/image/runtime': fileURLToPath(new URL('./node_modules/@nuxt/image/dist/runtime', import.meta.url)),
  },
})

[davidurco]

Turns out it is not fixed in v2 alpha. I solved it by installing nightly version, here's how it looks in my package.json:

"@nuxt/image": "npm:@nuxt/image-nightly@latest"