0

I'm working on a Nuxt 3 project that is fully based on ECMAScript modules and is deployed on Vercel. Some dependencies (or their compiled code) expect CommonJS globals like __filename, but in an ESM environment these are not defined. Initially, I encountered an error with __dirname and managed to work around it by using both a server-only plugin and a Vite define replacement in my nuxt.config.js. However, I'm now facing the following runtime error:

ReferenceError: __filename is not defined
    at pm (file:///var/task/chunks/routes/api/submit-lead.mjs:183:1110)
    ...

What I've tried:

  1. Global polyfill via a server-only plugin:

    I created a plugin (plugins/global-polyfill.server.js) with:

    import { fileURLToPath } from 'url';
    import { dirname } from 'path';
    
    globalThis.__dirname = dirname(fileURLToPath(import.meta.url));
    globalThis.__filename = fileURLToPath(import.meta.url);
    
  2. Vite define replacement in nuxt.config.js:

    I also added:

    import { fileURLToPath } from 'url';
    
    export default defineNuxtConfig({
      vite: {
        define: {
          __dirname: JSON.stringify(process.cwd()),
          __filename: JSON.stringify(fileURLToPath(import.meta.url))
        }
      }
    });
    

While these approaches seemed to resolve the __dirname issue, the __filename error persists.

How can I properly provide or replace __filename in my Nuxt 3 ESM project deployed on Vercel so that dependencies expecting CommonJS globals work correctly?

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.