Mirage
Mirage
PostsComments
NNuxt
Created by Mirage on 1/2/2025 in #❓・help
How to access the request event from within @sidebase/nuxt-auth NuxtAuthHandler?
I'd like to access the request event from within NuxtAuthHandler callbacks. I need this in order to set additional cookies / or access objects on event.context. This was one of the attempts I tried: 
import { NuxtAuthHandler } from '#auth'
import { useRequestEvent } from 'nuxt/app';

export default NuxtAuthHandler({
  callbacks: {
    async signIn({ account }) {
      const event = useRequestEvent()
    },
    async session({ session }) {
      const event = useRequestEvent()
      return session
    },
    async jwt({ token }) {
      const event = useRequestEvent()
      return token
    },
  },
});
import { NuxtAuthHandler } from '#auth'
import { useRequestEvent } from 'nuxt/app';

export default NuxtAuthHandler({
  callbacks: {
    async signIn({ account }) {
      const event = useRequestEvent()
    },
    async session({ session }) {
      const event = useRequestEvent()
      return session
    },
    async jwt({ token }) {
      const event = useRequestEvent()
      return token
    },
  },
});
However, this results in the following error: 
 ERROR  RollupError: [plugin impound] Vue app aliases are not allowed in server runtime.
 ERROR  RollupError: [plugin impound] Vue app aliases are not allowed in server runtime.
What's an alternative to access the request event in this case?
5 replies
NNuxt
Created by Mirage on 12/27/2024 in #❓・help
Cannot read properties of undefined (reading 'isKeyObject')
After integrating the @sidebase/nuxt-auth (next-auth) api handler at server/api/auth/[...].ts, I'm getting the following error during netlify build: 
TypeError: Cannot read properties of undefined (reading 'isKeyObject')
    at file:///opt/build/repo/.netlify/edge-functions/server/server.js:1:248573
TypeError: Cannot read properties of undefined (reading 'isKeyObject')
    at file:///opt/build/repo/.netlify/edge-functions/server/server.js:1:248573
What could be the cause and how to resolve it? I tried to debug this and the isssue is probably coming from next-auth and possible related to jose package.
10 replies
NNuxt
Created by Mirage on 12/20/2024 in #❓・help
Dynamically load i18n messages based on context
I'm using @nuxtjs/i18n and was wondering if it's possible to dynamically load/switch messages based on context (in my case, context is organization). In my case, organizations are of different types/templates, and for some organization templates, I would like to switch the messages to use different terminology. I tried to achieve this using lazy loading: 
// nuxt.config.ts
export default defineNuxtConfig({
  i18n: {
    // Module Options
    strategy: 'no_prefix',
    locales: [
      {
        code: 'en',
        file: 'i18n/locales/en.ts'
      }
    ],
    lazy: true,
    defaultLocale: 'eb',
    experimental: {
      localeDetector: './localeDetector.ts',
    },
  },
})
// nuxt.config.ts
export default defineNuxtConfig({
  i18n: {
    // Module Options
    strategy: 'no_prefix',
    locales: [
      {
        code: 'en',
        file: 'i18n/locales/en.ts'
      }
    ],
    lazy: true,
    defaultLocale: 'eb',
    experimental: {
      localeDetector: './localeDetector.ts',
    },
  },
})
// i18n/locales/en.ts
export default defineI18nLocale(async (locale) => {
  const route = useRoute()
  const organization = route.params.organization as string
  return await $fetch(`/api/${organization}/i18n/${locale}`)
})
// i18n/locales/en.ts
export default defineI18nLocale(async (locale) => {
  const route = useRoute()
  const organization = route.params.organization as string
  return await $fetch(`/api/${organization}/i18n/${locale}`)
})
// app.vue
<script setup lang="ts">
const { locale, loadLocaleMessages } = useI18n()
const organization = useOrganization()

watch(organization, async () => {
  await loadLocaleMessages(locale)
}, {
  immediate: true,
})
</script>
<template>
  <div>
    <NuxtRouteAnnouncer />
    <!-- <VitePwaManifest /> -->
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>
// app.vue
<script setup lang="ts">
const { locale, loadLocaleMessages } = useI18n()
const organization = useOrganization()

watch(organization, async () => {
  await loadLocaleMessages(locale)
}, {
  immediate: true,
})
</script>
<template>
  <div>
    <NuxtRouteAnnouncer />
    <!-- <VitePwaManifest /> -->
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>
However, because I'm using useRoute() in that handler, it results in the following error: 
ssr:error Failed locale loading: [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`. 
ssr:error Failed locale loading: [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`.
How can I best achieve dynamic loading of messages based on a context other than locale? (e.g. based on a certain route param)
10 replies
NNuxt
Created by Mirage on 12/11/2024 in #❓・help
Environment variables not available when running on Netlify Edge
I built and deployed my Nuxt 3 app to Netlify using the SERVER_PRESET=netlify_edge preset. However, it seems that all environment variables that I supply throught Netlify dashboard are not accessible from my Nuxt app. I checked the following: * I made sure all environment variables are added through Netlify dashboard and they have the correct value. * Variables have the appropriate NUXT_ or NUXT_PUBLIC_ prefix so that they can override the respective runtimeConfig variables. However, when accessing the app: * It seems that runtimeConfig is not being overriden regardless for public or non-public variables. * I even checked both runtimeConfig and process.env values through an API handler and non of them seem to contain my environment variables values. Any ideas on why environment variables aren't accessible when running on Netlify Edge?
8 replies
NNuxt
Created by Mirage on 11/25/2024 in #❓・help
I get TypeError: Object prototype may only be an Object or null: undefined when deploying to Netlify
When deploying my Nuxt 3 app to netlify using the netlify_edge preset the deployment fails with the following error: 
TypeError: Object prototype may only be an Object or null: undefined
    at Function.create (<anonymous>)
    at Object.ZI.exports [as inherits] (file:///opt/build/repo/.netlify/edge-functions/server/server.js:1:178408)
    at file:///opt/build/repo/.netlify/edge-functions/server/server.js:1:189772
TypeError: Object prototype may only be an Object or null: undefined
    at Function.create (<anonymous>)
    at Object.ZI.exports [as inherits] (file:///opt/build/repo/.netlify/edge-functions/server/server.js:1:178408)
    at file:///opt/build/repo/.netlify/edge-functions/server/server.js:1:189772
Even though from the logs nuxt build successfully completes, but the error is probably after netlify tries to start the bundled server. But it's almost impossible for me to debug the issue with the above stacktrace alone. How can I use the generated source map to find the respective stacktrace of the error above?
6 replies
NNuxt
Created by Mirage on 11/13/2024 in #❓・help
[resolved] Why using await inside composables cause them to break?
I believe my issue is similar to this https://discord.com/channels/473401852243869706/1141010505482379265 My original use case involved combining multiple composables, in which some composables depend on a value from others which I'd like to await to make sure data is rendered server side. I narrowed the issue to this: /app.vue 
<script setup lang="ts">
provide(/* key */ 'message', /* value */ 'hello!')
</script>

<template>
  <div>
    <NuxtRouteAnnouncer />
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>
<script setup lang="ts">
provide(/* key */ 'message', /* value */ 'hello!')
</script>

<template>
  <div>
    <NuxtRouteAnnouncer />
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>
/composables/useMessage.ts 
export const useMessage = async () => {
  await Promise.resolve()
  const message = inject('message', 'default-hello!')
  return computed(() => message)
}
export const useMessage = async () => {
  await Promise.resolve()
  const message = inject('message', 'default-hello!')
  return computed(() => message)
}
/pages/index.vue 
<script setup lang="ts">
const message = await useMessage()
</script>

<template>
  <div>
    <pre dir="ltr">{{ JSON.stringify({ message }, null, 2) }}</pre>
  </div>
</template>
<script setup lang="ts">
const message = await useMessage()
</script>

<template>
  <div>
    <pre dir="ltr">{{ JSON.stringify({ message }, null, 2) }}</pre>
  </div>
</template>
Running the app with the above code causes: * a WARN [Vue warn]: inject() can only be used inside setup() or functional components. * The value of 'message' is undefined Now, if I omit the await Promise.resolve() line from the composable. Everything works as expected including the value of 'message' being 'hello!'. Could you explain why does this happen? I can't make sense of it, because in my understanding this shouldn't be different than a synchronous statement.
7 replies
NNuxt
Created by Mirage on 10/18/2024 in #❓・help
[resolved] How would you implement showing a success message after posting a form?
I have this use case: 1. User navigate to /books/create which displays a form to create a book 2. User fills the from and submits the form 3. In case of a successful submit, the user gets redirected to /books/:id and a success message is shown at the top. Now, I'm not sure how to show the success message and make sure it's only shown once. E.g. it shouldn't appear again when page is refreshed. I'm thinking about using sessionStorage or just simply redirect to /books/:id?success=true and then somehow omit the success query param. What do you think? Are there existing solutions that solve this problem?
7 replies
NNuxt
Created by Mirage on 10/15/2024 in #❓・help
Nuxt-auth causing 500 Server Error due to invalid url passed to `new URL`.
What is the callbackUrl property of a SessionRequired error in nuxt-auth supposed to hold? See here: https://github.com/sidebase/nuxt-auth/blob/734953f89bd19192540452d9e0fbb225d01b28c3/src/runtime/middleware/auth.ts#L99 
  if (authConfig.provider.type === 'authjs') {
    const signInOptions: Parameters<typeof signIn>[1] = { error: 'SessionRequired', callbackUrl: determineCallbackUrl(authConfig, () => to.fullPath) }
    // eslint-disable-next-line ts/ban-ts-comment
    // @ts-ignore This is valid for a backend-type of `authjs`, where sign-in accepts a provider as a first argument
    return signIn(undefined, signInOptions) as ReturnType<typeof navigateToAuthPages>
  }
  if (authConfig.provider.type === 'authjs') {
    const signInOptions: Parameters<typeof signIn>[1] = { error: 'SessionRequired', callbackUrl: determineCallbackUrl(authConfig, () => to.fullPath) }
    // eslint-disable-next-line ts/ban-ts-comment
    // @ts-ignore This is valid for a backend-type of `authjs`, where sign-in accepts a provider as a first argument
    return signIn(undefined, signInOptions) as ReturnType<typeof navigateToAuthPages>
  }
I'm asking because this causing me 500 errors, because the final URL is invalid when passed to new URL. Basically, when I visit http://localhost:3000/welcome and /welcome is protected. The value of callbackUrl is determiend to be "/welcome" (which is the exact same value as to.fullPath, actually it is taken from it). So, I tried to manually set it to include the hostname and proto (e.g. "http://localhost:3000/welcome") but then it causes an infinite redirect to the same page. I've already tried setting up the correct env variables and baseURL but to no avail. The server always throws a 500 Error due to invalid value passed to new URL, but then somehow the client doesn't have this error and redirect to the auth page. More context: * using authjs * using Keycloak provider (only provider). * Already added NUXT_AUTH_ORIGIN=http://localhost:3000 * Already tried with and without baseURL
6 replies
NNuxt
Created by Mirage on 10/15/2024 in #❓・help
How to get the error / stack trace causing the 500 errors when pre-rendering?
No description
1 replies
NNuxt
Created by Mirage on 10/3/2024 in #❓・help
Prisma Studio asks to be installed in Nuxt DevTools with each reload?
Hello, I installed the nuxt prisma module and now every time I make changes to code it asks me: 
Do you want to view and edit your data by installing Prisma Studio in Nuxt DevTools?
Do you want to view and edit your data by installing Prisma Studio in Nuxt DevTools?
And it doesn't seem to remember my previous answer to "Y" yes install. Is there a configuration I can set so that it automatically installs and never ask me?
3 replies