Nuxt•5w ago

Nuxt 3 SSR Vercel Deployment Issues

Hey, having issues with vercel SSR. Will paste config/package in next message, just wondering if im missing anything obvious. it builds OK, but then when it deploys, i get 500's like some fetch is fetching html instead of json? it works locally though.

9 Replies

kapa.ai•5w ago

Hi @kb. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in your question, it seems you're experiencing issues with Nuxt 3 SSR deployment on Vercel. While I don't have specific details about your configuration or package.json, I can provide some general guidance based on common issues with Nuxt 3 and Vercel deployments. 1. API Routes: Vercel has a specific requirement for API routes with Nuxt. According to the Nitro documentation (https://nitro.unjs.io/deploy/providers/vercel#api-routes), you should use server/api/ directory for your API routes when using Nuxt with Vercel, instead of the /api directory. 2. Fetch Issues: The 500 errors you're experiencing, where it seems like fetch is retrieving HTML instead of JSON, could be related to how your API routes are set up or how you're making requests. Make sure you're using the appropriate Nuxt composables for data fetching, such as useFetch or useAsyncData, to avoid issues with SSR. The Nuxt documentation on data fetching (https://nuxt.com/docs/getting-started/data-fetching#the-need-for-usefetch-and-useasyncdata) explains why these are important for SSR. 3. Vercel Configuration: Ensure that your Vercel configuration is set up correctly for a Nuxt 3 SSR application. You might need to specify the correct Node.js version and build commands in your Vercel project settings. 4. Environment Variables: Check if all necessary environment variables are properly set in your Vercel project settings, especially if you're using different API endpoints for development and production. 5. Nuxt Configuration: Review your nuxt.config.ts file to ensure it's properly configured for SSR and production deployment. Without seeing your specific configuration and package.json, it's difficult to pinpoint the exact issue. If you can provide more details about your setup, including your Nuxt configuration, Vercel configuration, and any relevant code snippets, I'd be happy to take a closer look. Also, make sure to check the Vercel deployment logs for any specific error messages that might give more clues about what's going wrong during the deployment process. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5w ago

<@310160452221140996> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

kbOP•5w ago

I guess im looking for tips how to debug it, because i can't reproduce locally currently?

kbOP•5w ago

I did find this message from Daniel himself in 2021; https://discord.com/channels/473401852243869706/476088961010499605/842525934062272512 which lead me to moving some dependencies from devDependencies, to dependencies - and those went away, but no joy on vercel side.

kbOP•5w ago

nuxt config i have here, stripped of anything unrelated

message.txt

kbOP•5w ago

package.json scripts:

  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "bp": "nuxt build && nuxt preview",
    "postinstall": "nuxt prepare",
    "lint:js": "eslint --ext \".ts,.vue\" --ignore-path .gitignore .",
    "lint:prettier": "prettier --check .",
    "lint": "npm run lint:js && npm run lint:prettier",
    "lintfix": "prettier --write --list-different . && npm run lint:js --fix",
    "test:unit": "vitest",
    "test:e2e": "cypress open",
    "typecheck": "nuxi typecheck",
    "start": "nuxt start"
  },

  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "bp": "nuxt build && nuxt preview",
    "postinstall": "nuxt prepare",
    "lint:js": "eslint --ext \".ts,.vue\" --ignore-path .gitignore .",
    "lint:prettier": "prettier --check .",
    "lint": "npm run lint:js && npm run lint:prettier",
    "lintfix": "prettier --write --list-different . && npm run lint:js --fix",
    "test:unit": "vitest",
    "test:e2e": "cypress open",
    "typecheck": "nuxi typecheck",
    "start": "nuxt start"
  },

@kapa.ai do my additional messages shed any light

kapa.ai•5w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I apologize, but I don't have any additional messages or information from you beyond your initial question about Nuxt 3 SSR Vercel deployment issues. You mentioned that you would paste config/package details in the next message, but I don't have access to that information in the current context. To provide a more accurate and helpful answer, I would need to see the additional details you mentioned, such as your configuration files, package.json, or any specific error messages you're encountering. If you'd like to share those details, please post them in a new message, and I'll be happy to take a look and provide more specific guidance based on that information. In the meantime, if you have any other questions about Nuxt that don't require those specific details, feel free to ask, and I'll do my best to assist you based on the information available to me. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5w ago

<@310160452221140996> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

kbOP•5w ago

Uncaught Exception: SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON
    at JSON.parse (<anonymous>)
    at IncomingMessage.<anonymous> (file:///var/task/chunks/build/server.mjs:3107:42)
    at IncomingMessage.emit (node:events:531:35)
    at endReadableNT (node:internal/streams/readable:1696:12)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21)
Node.js process exited with exit status: 129. The logs above can help with debugging the issue.

Uncaught Exception: SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON
    at JSON.parse (<anonymous>)
    at IncomingMessage.<anonymous> (file:///var/task/chunks/build/server.mjs:3107:42)
    at IncomingMessage.emit (node:events:531:35)
    at endReadableNT (node:internal/streams/readable:1696:12)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21)
Node.js process exited with exit status: 129. The logs above can help with debugging the issue.

ive ran out of talent on this really. still working ok locally though

Gaming

Programming

Nuxt 3 SSR Vercel Deployment Issues