Nuxt•6d ago

Cannot deploy on Cloudflare - global is not defined

Hey guys, I have this error while deploying my Nuxt3 app on Cloudflare Pages 12:33:11.829 ✨ Compiled Worker successfully 12:33:11.996 Found _routes.json in output directory. Uploading. 12:33:12.007 Validating asset output directory 12:33:14.708 Deploying your site to Cloudflare's global network... 12:33:16.971 Parsed 3 valid header rules. 12:33:19.202 Uploading... (935/938) 12:33:19.537 Uploading... (936/938) 12:33:19.573 Uploading... (937/938) 12:33:19.720 Uploading... (938/938) 12:33:19.721 ✨ Success! Uploaded 3 files (935 already uploaded) (0.99 sec) 12:33:19.721
12:33:20.015 ✨ Upload complete! 12:33:22.350 Success: Assets published! 12:33:24.122 Error: Failed to publish your Function. Got error: Uncaught ReferenceError: global is not defined at chunks/nitro/nitro.mjs:1:30871 I tried differents solutions proposed on this discord following this specific issue but I'm still stuck. Any help help you web amazing from you guys please 🙏

5 Replies

kapa.ai•6d ago

Hi @Mars. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The error you're encountering while deploying your Nuxt 3 app on Cloudflare Pages is related to the global object not being defined. This is a common issue when deploying to environments that don't have a global global object, such as Cloudflare Workers. To resolve this issue, you can try the following solution: 1. Enable the clientNodeCompat experimental feature in your Nuxt configuration. This feature will automatically polyfill Node.js imports in the client build using unenv. 2. Manually inject the global object in your application. Here's how you can implement these changes: 1. First, update your nuxt.config.ts file to enable the clientNodeCompat feature:

export default defineNuxtConfig({
  experimental: {
    clientNodeCompat: true
  }
})

export default defineNuxtConfig({
  experimental: {
    clientNodeCompat: true
  }
})

2. Then, create a plugin file (e.g., plugins/global-polyfill.ts) with the following content:

export default defineNuxtPlugin(() => {
  if (typeof globalThis.global === 'undefined') {
    globalThis.global = globalThis;
  }
})

export default defineNuxtPlugin(() => {
  if (typeof globalThis.global === 'undefined') {
    globalThis.global = globalThis;
  }
})

This plugin will ensure that the global object is defined and set to globalThis when it's not available. After making these changes, rebuild your application and try deploying again to Cloudflare Pages. If you're still encountering issues, you might want to check the following: 1. Make sure you're using the correct deployment preset for Cloudflare Pages (https://nitro.unjs.io/deploy/providers/cloudflare#cloudflare-pages). You can set this in your nuxt.config.ts file:

export default defineNuxtConfig({
  nitro: {
    preset: 'cloudflare_pages'
  }
})

export default defineNuxtConfig({
  nitro: {
    preset: 'cloudflare_pages'
  }
})

2. Ensure that your Cloudflare Pages project is configured correctly, including any necessary environment variables (https://nitro.unjs.io/deploy/providers/cloudflare#environment-variables). 3. If you're using any Cloudflare-specific features or bindings, make sure they're properly configured in your wrangler.toml file and accessible in your development environment. If the problem persists after trying these solutions, you might need to investigate further by checking your application's dependencies and ensuring they're compatible with the Cloudflare Pages environment. Experimental Features: clientNodeCompat (https://nuxt.com/docs/guide/going-further/experimental-features#clientnodecompat) Deploy: Cloudflare Pages (https://nitro.unjs.io/deploy/providers/cloudflare#cloudflare-pages) Deploy: Environment Variables (https://nitro.unjs.io/deploy/providers/cloudflare#environment-variables) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6d ago

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

MarsOP•6d ago

@kapa.ai I just added the experimental clientnodecompat feature + created the plugin file and pushed to Cloudflare but I have the same error. Also, I already have in my cloudflare environnement variable for build purpose this variable NITRO_PRESET cloudflare_pages

kapa.ai•6d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I understand you've implemented the suggested changes but are still encountering the same error. Let's explore some additional steps to resolve this issue. First, it's good that you already have the NITRO_PRESET environment variable set to cloudflare_pages in your Cloudflare environment. This is the correct setting for deploying to Cloudflare Pages as documented here (https://nitro.unjs.io/deploy/providers/cloudflare#cloudflare-pages). Given that the error persists, let's try a few more things: 1. Make sure your nuxt.config.ts file explicitly sets the Cloudflare Pages preset:

export default defineNuxtConfig({
  nitro: {
    preset: 'cloudflare_pages'
  },
  experimental: {
    clientNodeCompat: true
  }
})

export default defineNuxtConfig({
  nitro: {
    preset: 'cloudflare_pages'
  },
  experimental: {
    clientNodeCompat: true
  }
})

2. If you're using any Node.js built-ins like Buffer, you might need to manually inject them. Add this to your plugin file or create a new one:

import { Buffer } from 'node:buffer'

export default defineNuxtPlugin(() => {
  if (typeof globalThis.Buffer === 'undefined') {
    globalThis.Buffer = Buffer
  }
  if (typeof globalThis.global === 'undefined') {
    globalThis.global = globalThis
  }
})

import { Buffer } from 'node:buffer'

export default defineNuxtPlugin(() => {
  if (typeof globalThis.Buffer === 'undefined') {
    globalThis.Buffer = Buffer
  }
  if (typeof globalThis.global === 'undefined') {
    globalThis.global = globalThis
  }
})

3. Ensure you're using the latest version of Nuxt and its dependencies. You can update them in your package.json file and run npm install or yarn install. 4. Try clearing your Cloudflare Pages cache. You can do this by going to your Cloudflare Pages project settings and clicking on "Clear cache" under the "Builds & deployments" section. 5. If you're using Wrangler for local development or deployment, make sure it's up to date:

npm install -g wrangler@latest

npm install -g wrangler@latest

6. Double-check your .dev.vars file (for local development) and Cloudflare Pages environment variables to ensure all necessary variables are set correctly. If none of these steps resolve the issue, you might need to investigate further by looking at the specific line where the error occurs. The error message you provided earlier mentioned:

Error: Failed to publish your Function. Got error: Uncaught ReferenceError: global is not defined
  at chunks/nitro/nitro.mjs:1:30871

Error: Failed to publish your Function. Got error: Uncaught ReferenceError: global is not defined
  at chunks/nitro/nitro.mjs:1:30871

This suggests the error is occurring in a Nitro-generated file. You might want to try rebuilding your project from scratch: 1. Delete the .nuxt and .output directories 2. Run npm cache clean --force (or yarn equivalent) 3. Reinstall dependencies: npm install (or yarn install) 4. Rebuild your project: npm run build (or yarn build) 5. Deploy again to Cloudflare Pages If the problem still persists, you might need to reach out to Cloudflare support or the Nuxt community with more detailed information about your project structure and dependencies. Cloudflare Pages Deployment (https://nitro.unjs.io/deploy/providers/cloudflare#cloudflare-pages) Experimental Features: clientNodeCompat (https://nuxt.com/docs/guide/going-further/experimental-features#clientnodecompat) Environment Variables in Cloudflare (https://nitro.unjs.io/deploy/providers/cloudflare#environment-variables) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6d ago

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

Gaming

Programming

Cannot deploy on Cloudflare - global is not defined