Module causes "__dirname is not defined" error when deploying to Cloudflare Workers

[MattFaz]

Nuxt3 documents advise you can deploy to Cloudflare Workers. Guide can be found on the Nitro documentation.

The commands wrangler dev and wrangler publish work successfully when @nuxt/image-edge is commented out of the nuxt.config.ts file. However when adding adding it back I receive the following error:

Error: Something went wrong with the request to Cloudflare...
Uncaught ReferenceError: __dirname is not defined
  at worker.js:1:918893
  at worker.js:1:1051834
 [API code: 10021]

Video attached showing it working with @nuxt/image-edge commented out and then adding it back resulting in the error.

https://user-images.githubusercontent.com/10377148/187341690-8c20f653-de1f-4c1a-af90-a0f478850320.mov

[ricky11]

This probably has something to do with static site generation still not supported.

[398noe]

Same thing happened to me :disappointed:

[pxtrez]

any updates?

[BlakeB415]

Same, this completely prevents me from using the module.

[OlaAlsaker]

Experiencing the same thing.

[rvmourik]

I also am experiencing this issue

[dolbex]

Also just experienced this

[vilhelmjosander]

Same here!

[cliqer]

It seems that when cloudflare is selected as the provider the link is: /cdn-cgi/image/f=webp/<image_name>" while it should be: https://imagedelivery.net/<zone_id>/<image_id>/<variant_name>

[oleghalin]

Same here, cannot deploy to CF workers

[brpaz]

Same problem here.

You can use this repo to reproduce.

1. Clone https://github.com/brpaz/nuxt-starter
2. Add @nuxt/image-edge module to nuxt.config.ts
3. Run yarn install && yarn build:cloudflare
4. Run npx wrangler dev

[cliqer]

This has been fixed on the latest update of @nuxt/image-edge. You simply need to enable image optimisation in Cloudflare. Your domain -> Speed -> Optimization -> Image Resizing

[brpaz]

@cliqer Thanks for answering, but Image Resizing is a Pro Cloudflare feature. I only want to deploy my site to Cloudflare and not have it deal with images.

I think I misunderstood how nuxt/image is supposed to work. I thought the optimized images would be generated at build time, but after checking IPX, this doesn´t seem to be the case and behaves as a server-side proxy to do the optimizations.

Is there any way I can use nuxt/image, only at build time and not rely on a Server?

---

Edit: Think I found my answer. Need to use the static provider. I don´t have the error anymore.

Add the following to the nuxt.config.ts

  image: {
    provider: 'static',
  },

[TaylorFinklea]

@brpaz I tried on the latest version and using the static provider as you suggested but I get this error Unknown provider: static. Did you run into this?

[AdiRishi]

@brpaz I tried on the latest version and using the static provider as you suggested but I get this error Unknown provider: static. Did you run into this?

Yup I just ran into the same. Any word on why this happens?

[jkneepkens]

Any update on this one? I'm also getting the following error when trying to deploy it to CloudFlare workers:

ReferenceError: __dirname is not defined
    at <PROJECT_DIR>node_modules/sharp/lib/libvips.js:23:30
    at <PROJECT_DIR>.nuxt/dist/server/_nuxt/Footer-styles-1.mjs-1e6a6f56.js:1:1
    at /private/var/folders/jn/f7gcf06507348j3qq0497h180000gp/T/tmp-3668-Tp4HcaifcnBG/index.js:13931:3
    at Script.runInContext (node:vm:141:12)
    at VMScriptRunner.runAsScript (<USER_DIR>.nvm/versions/node/v16.17.0/lib/node_modules/wrangler/node_modules/@miniflare/runner-vm/src/index.ts:26:12)
    at VMScriptRunner.run (<USER_DIR>.nvm/versions/node/v16.17.0/lib/node_modules/wrangler/node_modules/@miniflare/runner-vm/src/index.ts:88:12)
    at EventTarget.#reload (<USER_DIR>.nvm/versions/node/v16.17.0/lib/node_modules/wrangler/node_modules/@miniflare/core/src/index.ts:790:42)
    at EventTarget.getPlugins (<USER_DIR>.nvm/versions/node/v16.17.0/lib/node_modules/wrangler/node_modules/@miniflare/core/src/index.ts:1033:5)
    at createServer (<USER_DIR>.nvm/versions/node/v16.17.0/lib/node_modules/wrangler/node_modules/@miniflare/http-server/src/index.ts:362:19)
    at startServer (<USER_DIR>.nvm/versions/node/v16.17.0/lib/node_modules/wrangler/node_modules/@miniflare/http-server/src/index.ts:469:18)
Waiting for the debugger to disconnect...

I tried also the Cloudflare Pages deployment, but didn't get one working with the nitro_preset, if that's the better method I would like to have some help with that one.

[ndragun92]

Getting same ReferenceError: __dirname is not defined error

[shuesken]

I'm encountering the same error:

Uncaught ReferenceError: __dirname is not defined
    at worker.js:5680:7030
    at worker.js:17999:4
    at worker.js:18000:3
   [code: 10021]

In nuxt.config.ts, I have set:

image: {
    prismic: {},
  },

Curiously, the error only occurs for our automatic CI deployment via Github actions. Manual deployment from my machine works.

[fro-profesional]

It also happens with NITRO_PRESET=deno

[duncandejong]

Getting same error "ReferenceError: __dirname is not defined"

[Aietes]

Same here: Error: Failed to publish your Function. Got error: Uncaught ReferenceError: __dirname is not defined. Is there any workaround or fix for this? Seems like the issue has existed for a while now. I wonder if anyone found a solution...

[duncandejong]

Same here: Error: Failed to publish your Function. Got error: Uncaught ReferenceError: __dirname is not defined. Is there any workaround or fix for this? Seems like the issue has existed for a while now. I wonder if anyone found a solution...

I made local copies of the images for now (small site), cant use this module until fixed.  ❤️ to the developers! If i could help... i would. I am not that technical

[mattgrah-am]

not sure if this helps, but was mentioned in the nuxt discord:

"__dirname is something Node provides, but cloudflare is using its own JS runtime which doesn't provide __dirname https://developers.cloudflare.com/workers/runtime-apis/"

[digitdash]

This has been fixed on the latest update of @nuxt/image-edge. You simply need to enable image optimisation in Cloudflare. Your domain -> Speed -> Optimization -> Image Resizing

Definitely not fixed. I have this enabled and still the exact same issue...

[danielroe]

This was resolved in the first RC with https://github.com/nuxt/image/pull/840 although until the next release, you will need to add the following line to your nuxt.config:

export default defineNuxtConfig({
  image: {
    none: {}
  }
})