takburger Posts - Answer Overflow

takburger

Explore posts from servers

•Created by takburger on 8/11/2024 in #❓・help

How to run nitro task on cloudflare ?

I have deployed a site on cloudflare using nuxt hub. I have on it a task, specified to run every hour. However I realized that task isn't triggered on production on cloudflare. Here is my config on nuxt.config.ts :

nitro: {
    experimental: {
      // Enable Server API documentation within NuxtHub
      openAPI: true,
      tasks: true,
    },
    scheduledTasks: {
      "0 * * * *": "news:update",
    },
  },

nitro: {
    experimental: {
      // Enable Server API documentation within NuxtHub
      openAPI: true,
      tasks: true,
    },
    scheduledTasks: {
      "0 * * * *": "news:update",
    },
  },

5 replies

NNuxt

•Created by takburger on 7/12/2024 in #❓・help

Help debugging - illegal invocation rejection - nuxt hub

Hello Yesterday while starting my project in dev, I got "illegal invocation" error from Nitro and so far I was unable to identify the issue or do a reproduction. I need help identifying the issue please. Here is the message I'm having in the terminal :

ERROR  [nitro] [unhandledRejection] Illegal invocation

  at Object.waitUntil (node_modules/.pnpm/[email protected]_@[email protected]/node_modules/wrangler/wrangler-dist/cli.js:210509:13)
  at H3Event.event.waitUntil (node_modules/.pnpm/[email protected][email protected]_@[email protected]_@opentelemetry+api@_teyskodm67itc45mrvrgk57ica/node_modules/nitropack/dist/runtime/app.mjs:96:22)
  at captureError (node_modules/.pnpm/[email protected][email protected]_@[email protected]_@opentelemetry+api@_teyskodm67itc45mrvrgk57ica/node_modules/nitropack/dist/runtime/app.mjs:38:23)
  at Object.onError (node_modules/.pnpm/[email protected][email protected]_@[email protected]_@opentelemetry+api@_teyskodm67itc45mrvrgk57ica/node_modules/nitropack/dist/runtime/app.mjs:45:7)
  at Server.toNodeHandle (node_modules/.pnpm/[email protected]/node_modules/h3/dist/index.mjs:2274:27)
  at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

ERROR  [nitro] [unhandledRejection] Illegal invocation

  at Object.waitUntil (node_modules/.pnpm/[email protected]_@[email protected]/node_modules/wrangler/wrangler-dist/cli.js:210509:13)
  at H3Event.event.waitUntil (node_modules/.pnpm/[email protected][email protected]_@[email protected]_@opentelemetry+api@_teyskodm67itc45mrvrgk57ica/node_modules/nitropack/dist/runtime/app.mjs:96:22)
  at captureError (node_modules/.pnpm/[email protected][email protected]_@[email protected]_@opentelemetry+api@_teyskodm67itc45mrvrgk57ica/node_modules/nitropack/dist/runtime/app.mjs:38:23)
  at Object.onError (node_modules/.pnpm/[email protected][email protected]_@[email protected]_@opentelemetry+api@_teyskodm67itc45mrvrgk57ica/node_modules/nitropack/dist/runtime/app.mjs:45:7)
  at Server.toNodeHandle (node_modules/.pnpm/[email protected]/node_modules/h3/dist/index.mjs:2274:27)
  at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

It seems to happen when an /api/ route is requested. On the frontend it throws a 404 in the javascript console. By checking my commit history, I was also not able to identify anything meaningful around that date. I did update dependencies, but reversing that update or reproducing such update on an empty project did nothing.

10 replies

NNuxt

•Created by takburger on 5/3/2024 in #❓・help

How to use Lucia with Nuxt Hub ? (error: missing cloudflare db binding)

As the title suggest, I have the following error :

ERROR  [worker reload] [worker init] Missing Cloudflare DB binding (D1)                           11:54:13 PM

  at createError (node_modules/.pnpm/[email protected]/node_modules/h3/dist/index.mjs:74:12)
  at hubDatabase (node_modules/.pnpm/@[email protected][email protected][email protected]_@[email protected]_@[email protected]_@uno_dwp6dcetq7zet4pibimgquizse/node_modules/@nuxthub/core/dist/runtime/server/utils/database.mjs:22:9)
  at useDrizzle (server/utils/drizzle.ts:11:1)
  at <anonymous> (server/utils/drizzle.ts:15:1)
  at ModuleJob.run (node:internal/modules/esm/module_job:235:25)
  at async ModuleLoader.import (node:internal/modules/esm/loader:461:24)
  at async asyncRunEntryPointWithESMLoader (node:internal/modules/run_main:119:5)

ERROR  [worker reload] [worker init] Missing Cloudflare DB binding (D1)                           11:54:13 PM

  at createError (node_modules/.pnpm/[email protected]/node_modules/h3/dist/index.mjs:74:12)
  at hubDatabase (node_modules/.pnpm/@[email protected][email protected][email protected]_@[email protected]_@[email protected]_@uno_dwp6dcetq7zet4pibimgquizse/node_modules/@nuxthub/core/dist/runtime/server/utils/database.mjs:22:9)
  at useDrizzle (server/utils/drizzle.ts:11:1)
  at <anonymous> (server/utils/drizzle.ts:15:1)
  at ModuleJob.run (node:internal/modules/esm/module_job:235:25)
  at async ModuleLoader.import (node:internal/modules/esm/loader:461:24)
  at async asyncRunEntryPointWithESMLoader (node:internal/modules/run_main:119:5)

I tried to implement as per the documentation of Lucia, with some changes.

import * as schema from '../database/schema'

export const tables = schema

export function useDrizzle() {
  return drizzle(hubDatabase(), { schema })
}

// the following line is failing 
const adapter = new DrizzleSQLiteAdapter(
  useDrizzle(),
  tables.session,
  tables.user
)

export const lucia = new Lucia(adapter, {
  sessionCookie: {
    attributes: {
      secure: !process.dev,
    },
  },
})

import * as schema from '../database/schema'

export const tables = schema

export function useDrizzle() {
  return drizzle(hubDatabase(), { schema })
}

// the following line is failing 
const adapter = new DrizzleSQLiteAdapter(
  useDrizzle(),
  tables.session,
  tables.user
)

export const lucia = new Lucia(adapter, {
  sessionCookie: {
    attributes: {
      secure: !process.dev,
    },
  },
})

docs: - https://hub.nuxt.com/docs/recipes/drizzle#usedrizzle - https://lucia-auth.com/database/drizzle - https://lucia-auth.com/getting-started/nuxt Definition of hubDatabase() with similar error on line 38 : https://github.com/nuxt-hub/core/blob/main/src/runtime/server/utils/database.ts reproduction link : https://stackblitz.com/~/github.com/rktmatt/help-drizzle-nuxt-hub

80 replies

NNuxt

•Created by takburger on 4/6/2024 in #❓・help

Nuxt UI Form @keyup.enter sending an undefined event.data

Hello, I recently switched to Nuxt UI and it has been a great experience. I'm having an issue with the forms though. I have two issues : 1. Sometimes the Zod errors aren't displayed 2. @keyup.enter sends an undefined event.data Here is the code :

<script setup lang="ts">
  import { z } from 'zod'
  import type { FormSubmitEvent } from '#ui/types'

  const props = defineProps<{
    id: string
  }>()

  const schema = z.object({
    email: z.string().email('Invalid email'),
    current: z.boolean(),
  })

  type Schema = z.output<typeof schema>

  const state = reactive({
    email: undefined,
    current: true,
  })

  async function onSubmit(event: FormSubmitEvent<Schema>) {
    try {
      /*
      await $fetch(`/api/clients/${props.id}/email/`, {
        method: 'POST',
        body: event.data,
      })
      await refreshNuxtData(`client_${props.id}-emails`)*/
      console.log(event.data)
    } catch (error) {
      const toast = useToast()
      toast.add({
        title: 'Error',
        description: "Something went wrong",
        icon: 'i-heroicons-exclamation-triangle',
        color: 'red',
      })
    }
  }
</script>
<template>
  <UCard>
    <UForm
      :schema="schema"
      :state="state"
      class="space-y-4"
      @keyup.enter="onSubmit"
      @submit="onSubmit">
<!-- etc -->

<script setup lang="ts">
  import { z } from 'zod'
  import type { FormSubmitEvent } from '#ui/types'

  const props = defineProps<{
    id: string
  }>()

  const schema = z.object({
    email: z.string().email('Invalid email'),
    current: z.boolean(),
  })

  type Schema = z.output<typeof schema>

  const state = reactive({
    email: undefined,
    current: true,
  })

  async function onSubmit(event: FormSubmitEvent<Schema>) {
    try {
      /*
      await $fetch(`/api/clients/${props.id}/email/`, {
        method: 'POST',
        body: event.data,
      })
      await refreshNuxtData(`client_${props.id}-emails`)*/
      console.log(event.data)
    } catch (error) {
      const toast = useToast()
      toast.add({
        title: 'Error',
        description: "Something went wrong",
        icon: 'i-heroicons-exclamation-triangle',
        color: 'red',
      })
    }
  }
</script>
<template>
  <UCard>
    <UForm
      :schema="schema"
      :state="state"
      class="space-y-4"
      @keyup.enter="onSubmit"
      @submit="onSubmit">
<!-- etc -->

6 replies

KPCKevin Powell - Community

•Created by takburger on 9/12/2023 in #ui-ux

High contrast text over a carousel ?

Hi, I'm doing a carousel for a hero section. I want to include some text before a CTA on top of the carousel. I find myself not satisfied with the legibility of the text on top of the image/videos. I was wondering if there were good practices when approaching such a task. I've tried to work with text-shadow, mix-blend-mode, darken the images or place a card. Couldn't find a way to make something simple and impactful. How would you do that ? I think maybe the best solution is strong editorial guidelines for the pictures, but on that use case it's guaranteed to fail.

9 replies

Gaming

Programming