Nuxt•2mo ago

Nuxt + Cloudflare Pages 1101 Error from Nuxt generated script

I have been working on getting a Nuxt project into Cloudflare with no success. The build works locally using yarn build and yarn preview with the environment variables I intend on using in Cloudflare. When the build finishes successfully and the project deployed to Pages, the resulting application produces an error The script will never generate a response. This is apparently produced from pages-worker--....-production which from what I am told from asking help on Cloudflare's Discord server is that this is something produced by Nuxt, not Cloudflare. I followed the Nuxt/Nitro deployment steps for Cloudflare and set the nitro configuration (which is very proud about being configuration free) for .html stuff. Needing some help figuring out whats going on here. Cloudflare is unfortunately lacking in transparent logging under the hood. nuxt.config.ts

nitro: {
  preset: "cloudflare-pages",
  prerender: {
    autoSubfolderIndex: false
  }
}

nitro: {
  preset: "cloudflare-pages",
  prerender: {
    autoSubfolderIndex: false
  }
}

Nuxt version: 3.15.2 Attached is the Page trace log from Cloudflare

message.txt

3 Replies

kapa.ai•2mo ago

Hi @BigBallard. 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 and the knowledge sources available, it seems you're encountering an issue when deploying a Nuxt 3 project to Cloudflare Pages. Let's address this step by step: 1. Configuration: Your nuxt.config.ts configuration looks correct for deploying to Cloudflare Pages. You've set the preset to "cloudflare-pages" and disabled auto subfolder index in prerendering, which are good steps. 2. Build Process: It's positive that your build works locally using yarn build and yarn preview. This suggests that the issue might be related to the deployment environment rather than your local setup. 3. Error Message: The error "The script will never generate a response" typically indicates that the worker script is not properly handling the request or is timing out. This could be due to various reasons, including incompatible dependencies or incorrect environment setup. 4. Potential Solutions: a. Environment Variables: Make sure all necessary environment variables are correctly set in your Cloudflare Pages project settings. As mentioned in the Cloudflare Pages documentation, you need to create a D1 database and connect it to your project under the DB binding name. b. Compatibility Date: Try adding a compatibilityDate to your Nuxt configuration. This can help ensure compatibility with Cloudflare's runtime:

   export default defineNuxtConfig({
     nitro: {
       preset: 'cloudflare_pages',
     },
     compatibilityDate: '2024-02-01' // Use a recent date
   })

   export default defineNuxtConfig({
     nitro: {
       preset: 'cloudflare_pages',
     },
     compatibilityDate: '2024-02-01' // Use a recent date
   })

c. Node.js Compatibility: Ensure you're not using any Node.js-specific APIs that are not available in the Cloudflare Workers environment. Cloudflare Pages with Nuxt 3 runs in a serverless environment, which has limitations compared to a full Node.js environment. d. Cloudflare-specific Settings: As mentioned in the Nuxt deployment documentation, make sure to disable certain Cloudflare optimizations that can interfere with Nuxt: - Disable "Auto Minify" for JavaScript, CSS, and HTML - Disable "Rocket Loader™" - Disable "Mirage" in Image Optimization - Disable "Email Address Obfuscation" in Scrape Shield 5. Debugging: Unfortunately, as you mentioned, Cloudflare Pages doesn't provide extensive logging. However, you can try to add more console logs in your Nuxt application, especially in any server-side code or API routes, to help identify where the execution might be failing. 6. Alternative Approach: If you continue to face issues, you might want to consider using the static generation approach for Cloudflare Pages. You can do this by adding the following to your nuxt.config.ts:

nitro: {
  prerender: {
    crawlLinks: true,
    routes: ['/'],
  },
},

nitro: {
  prerender: {
    crawlLinks: true,
    routes: ['/'],
  },
},

This will pre-generate your pages at build time, which might bypass some of the runtime issues you're experiencing. If these steps don't resolve your issue, you might need to provide more details about your application structure, dependencies, and any custom server-side code you're using. Additionally, checking for any recent issues or discussions in the Nuxt GitHub repository related to Cloudflare Pages deployment might provide further insights. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

BigBallardOP•2mo ago

I didn't see the D1 part prior and after fixing that (creating a D1 database and binding using DB) the same issues persists. But I think this has more to do with @nuxt/content than anything else, which I am not using.

Gaming

Programming

Nuxt + Cloudflare Pages 1101 Error from Nuxt generated script

Did you find this page helpful?