Nuxt•2mo ago

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

Hello. I want to create a custom provider for @nuxt/image. I use instructions from https://image.nuxt.com/advanced/custom-provider My custom provider is:

import { joinURL } from 'ufo'
import { createOperationsGenerator, defineProvider } from '@nuxt/image/runtime'

const operationsGenerator = createOperationsGenerator()

export default defineProvider<{ baseURL?: string }>({
  getImage (src, { modifiers, baseURL }) {
    if (!baseURL) {
      // also support runtime config
      baseURL = useRuntimeConfig().public.siteUrl
    }

    const operations = operationsGenerator(modifiers)

    return {
      url: joinURL(baseURL, src + (operations ? '?' + operations : ''))
    }
  }
})

import { joinURL } from 'ufo'
import { createOperationsGenerator, defineProvider } from '@nuxt/image/runtime'

const operationsGenerator = createOperationsGenerator()

export default defineProvider<{ baseURL?: string }>({
  getImage (src, { modifiers, baseURL }) {
    if (!baseURL) {
      // also support runtime config
      baseURL = useRuntimeConfig().public.siteUrl
    }

    const operations = operationsGenerator(modifiers)

    return {
      url: joinURL(baseURL, src + (operations ? '?' + operations : ''))
    }
  }
})

But I get the error: " Missing "./runtime" specifier in "@nuxt/image" package". What do I do incorrect?

Nuxt Image

Custom Provider

If a CDN provider is not supported, you can define it yourself.

5 Replies

kapa.ai•2mo ago

Hi @Yuri. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The error "Missing './runtime' specifier in '@nuxt/image' package" occurs because the import path @nuxt/image/runtime is not valid or exposed in the published @nuxt/image package. The official documentation for creating a custom provider does show imports from @nuxt/image/runtime, but this assumes that the runtime exports are available, which may not be the case depending on your installed version or the way the package is bundled. What you can do: 1. Check your @nuxt/image version:
The custom provider documentation is for Nuxt Image v1 (Nuxt 3+). If you are using Nuxt 2, you must use @nuxt/image@v0, which may not expose the same runtime API. For Nuxt 3, ensure you have the latest @nuxt/image installed as per the installation guide. 2. Verify the runtime export:
The documentation assumes that @nuxt/image/runtime is available. If it is not, this may be a packaging issue or a change in how the module exposes its internals. There is no explicit workaround in the knowledge sources, but you should ensure you are using the correct version and that your node_modules/@nuxt/image package contains a runtime directory or export. 3. Alternative approach:
If the runtime is not exposed, you may need to copy the relevant utilities (like joinURL, createOperationsGenerator, and defineProvider) into your own project, or check if they are available from another package or path. The documentation does not provide an alternative import path or workaround for this issue. 4. Check for updates or issues:
This may be a known issue. The documentation suggests opening an issue if you encounter problems not covered in the docs. You can check the Nuxt Image GitHub issues for similar reports or open a new one describing your problem. Summary:
The error is due to the @nuxt/image/runtime import not being available in your installed package. Double-check your Nuxt and @nuxt/image versions, and ensure you are following the documentation for the correct version. If the runtime export is missing, consult the module's repository for updates or report the issue, as the knowledge sources do not provide a direct solution for this specific errorCustom Provider Installation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@740173469404364872> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

YuriOP•2mo ago

@kapa.ai 1. I use "@nuxt/image": "^1.11.0",

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Thank you for clarifying that you are using @nuxt/image version ^1.11.0. Based on the official documentation for creating a custom provider, you are instructed to import utilities from @nuxt/image/runtime:

import { joinURL } from 'ufo'
import { createOperationsGenerator, defineProvider } from '@nuxt/image/runtime'

import { joinURL } from 'ufo'
import { createOperationsGenerator, defineProvider } from '@nuxt/image/runtime'

However, the error "Missing './runtime' specifier in '@nuxt/image' package" indicates that the runtime export is not available in your installed version of @nuxt/image. The knowledge sources do not provide any workaround or mention this issue directly. They assume that the runtime entry is available for custom providers, but do not address what to do if it is missing or not exposed in the published packageCustom Provider. What you can do: - Double-check that you are using the correct version of @nuxt/image for Nuxt 3, which you are (^1.11.0). - The knowledge sources do not mention an alternative import path or solution if @nuxt/image/runtime is missing. - If the runtime export is not present, the documentation suggests opening an issue if you encounter errors not covered in the docsInstallation. Summary:
I'm sorry, but the knowledge sources do not contain enough information to resolve the "Missing './runtime' specifier in '@nuxt/image' package" error when creating a custom provider. The documentation assumes this export exists, but does not address what to do if it does not. You may need to check the package contents or open an issue with the Nuxt Image team for further support. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@740173469404364872> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

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

Did you find this page helpful?