image icon indicating copy to clipboard operation
image copied to clipboard

Passing the runtimeConfig to provider getImage functions

Open cjpearson opened this issue 1 year ago • 0 comments
trafficstars

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch @nuxt/[email protected] for the project I'm working on.

When a provider depends on the runtime configuration, the current suggested approach is to use useRuntimeConfig, but this often throws the error [nuxt] [request error] [unhandled] [500] [nuxt] A composable that requires access to the Nuxt instance was called outside of a plugin, Nuxt hook, Nuxt middleware, or Vue setup function. This is probably not a Nuxt bug. Find out more at https://nuxt.com/docs/guide/concepts/auto-imports#vue-and-nuxt-composables because getImage may be called outside of a composable/setup function. Would it be possible to instead add the runtime configuration to the ctx argument or provide another mechanism of using the runtime configuration in a provider?

Here is the diff that solved my problem:

diff --git a/node_modules/@nuxt/image/dist/module.d.ts b/node_modules/@nuxt/image/dist/module.d.ts
index 94e5231..253d290 100644
--- a/node_modules/@nuxt/image/dist/module.d.ts
+++ b/node_modules/@nuxt/image/dist/module.d.ts
@@ -1,5 +1,5 @@
 import * as _nuxt_schema from '@nuxt/schema';
-import { Nuxt } from '@nuxt/schema';
+import { Nuxt, RuntimeConfig } from '@nuxt/schema';
 import { IPXOptions as IPXOptions$1, HTTPStorageOptions, NodeFSSOptions } from 'ipx';
 
 interface ImageModifiers {
@@ -46,6 +46,7 @@ interface CreateImageOptions {
     densities: number[];
     format: string[];
     quality?: number;
+    runtimeConfig: RuntimeConfig;
 }
 interface ImageInfo {
     width: number;
diff --git a/node_modules/@nuxt/image/dist/runtime/composables.mjs b/node_modules/@nuxt/image/dist/runtime/composables.mjs
index e8cbade..8d45874 100644
--- a/node_modules/@nuxt/image/dist/runtime/composables.mjs
+++ b/node_modules/@nuxt/image/dist/runtime/composables.mjs
@@ -8,6 +8,7 @@ export const useImage = () => {
     ...imageOptions,
     nuxt: {
       baseURL: config.app.baseURL
-    }
+    },
+    runtimeConfig: config,
   }));
 };

This issue body was partially generated by patch-package.

cjpearson avatar Feb 13 '24 16:02 cjpearson