takburger
takburger
Explore posts from servers
NNuxt
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