Dev tools error on Hub Database

[remihuigen]

Describe the bug Devtools > Hub Database returns error. This happens for both local storage and remote storage (preview / production)

Error: [POST] "http://localhost:3000/api/_hub/database/query": <no response> Failed to fetch
    at window.drizzle (https://admin.hub.nuxt.com/_nuxt/C4vrWRsH.js:34:300)
    at async https://admin.hub.nuxt.com/_nuxt/DAGmC-JB.js:12175:4589
    at async Promise.all (index 0)
    at async g7e (https://admin.hub.nuxt.com/_nuxt/DAGmC-JB.js:12114:5259)
    at async P7e (https://admin.hub.nuxt.com/_nuxt/DAGmC-JB.js:12175:4561)

{
  "drizzle-playground": {
    "state": {
      "editorHight": 300,
      "currentFile": "sql",
      "drizzleValue": null,
      "sqlValue": null,
      "showRecordsAsJson": false,
      "drizzleResult": "{\"json\":null}",
      "sqlResult": "{\"json\":null}"
    },
    "version": 0
  },
  "drizzle-global": {
    "state": {
      "showCounts": false
    },
    "version": 0
  },
  "drizzle-version": "2.0.1"
}

Steps to reproduce

export default defineNuxtConfig({

  modules: ["@nuxthub/core", '@nuxt/devtools'],

  hub: {
    analytics: true,
    cache: true,
    blob: false,
    database: true,
    kv: false,
  },

  devtools: { enabled: process.env.NODE_ENV === 'development' },

  nitro: {
    errorHandler: "~/error",
    experimental: {
      openAPI: true,
      tasks: true
    },
  },

  future: {
    compatibilityVersion: 4,
  },

  compatibilityDate: '2024-08-15',
});

{
  "private": true,
  "version": "0.0.1",
  "scripts": {
    "build": "nuxt build",
    "netlify": "netlify dev",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare",
    "db:generate": "drizzle-kit generate",
    "remote": "nuxt dev --remote",
    "remote:prod": "nuxt dev --remote=production"
  },
  "devDependencies": {
    "@nuxt/devtools": "^1.3.9",
    "@nuxthub/core": "^0.7.1",
    "drizzle-kit": "^0.24.0",
    "nuxt": "^3.12.4",
    "prettier": "^3.3.3",
    "typescript": "^5.5.4",
    "uuid": "^10.0.0",
    "wrangler": "^3.71.0"
  },
  "overrides": {
    "vue": "latest"
  },
  "dependencies": {
    "drizzle-orm": "^0.33.0"
  }
}

[remihuigen]

Nevermind, it's a cors issue in my nuxt app 😃

[stigvanbrabant]

Nevermind, it's a cors issue in my nuxt app 😃

@remihuigen I'm experiencing the same thing, nothing specific configured cors whise. How did you resolve this?

[remihuigen]

@stigvanbrabant I've added server middleware to set cors headers for the /_hub routes

export default defineEventHandler((event) => {
    if (!event._path?.startsWith('/api/_hub')) {
        setResponseHeaders(event, {
            "Access-Control-Allow-Methods": "GET,POST,PUT,DELETE,PATCH",
            "Access-Control-Allow-Origin": "*",
            'Access-Control-Allow-Credentials': 'true',
            "Access-Control-Allow-Headers": '*',
            "Access-Control-Expose-Headers": '*'
        })

        if (event.method === 'OPTIONS') {
            event.node.res.statusCode = 204
            event.node.res.statusMessage = "No Content."
            return 'OK'
        }
    }
})