Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Passing the runtimeConfig to provider getImage functions #1247

Open
cjpearson opened this issue Feb 13, 2024 · 0 comments
Open

Passing the runtimeConfig to provider getImage functions #1247

cjpearson opened this issue Feb 13, 2024 · 0 comments

Comments

@cjpearson
Copy link

Hi! 馃憢

Firstly, thanks for your work on this project! 馃檪

Today I used patch-package to patch @nuxt/image@1.3.0 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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant