__dirname in dependency not being handled by Vite

[wyseguyonline]

I'm trying to build a React component library. Buried in my dependency tree is a component (xml-parse) that uses __dirname in an attempt to do some dynamic requires. When I build my component, everything seems to run fine (that is no errors). However, when I load my component in my demo app in the browser, I run into "__dirname is not defined". When I look at the build file, sure enough the __dirname reference is still there.

Build vite.config.js

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

// https://vitejs.dev/config/
export default defineConfig({
  build: {
    lib: {
        entry: path.resolve(__dirname, 'src/lib/index.js'),
        name: 'AnnotationsComponent',
        formats: ['es'],
        fileName: (format) => `AnnotationsComponent.${format}.js`,
    },
    rollupOptions: {
        external: ['react', 'react-dom'],
        output: {
            globals: {
                react: 'React',
                'react-dom': 'ReactDOM',
            },
        },
    },
  },
  plugins: [react()]
});

Dependency code that persists through the build (from xml-parse):

var main$1 = {
  parse: commonjsRequire(__dirname + "/resources/parser.js").parseFromString,
  stringify: commonjsRequire(__dirname + "/resources/stringifier.js").stringify,
  DOM: commonjsRequire(__dirname + "/resources/dom.js").DOM
};

Please note: the __dirname references in the vite.config.js file are working fine. This is a dependency several layers down my dependency tree that is using __dirname and it isn't getting resolved. I also do not have the ability to effect changes to the dependencies which use xml-parse.

I'm really at a loss for what to do here and nearly every search brings up something that just isn't helpful. I'm sure there is something I'm overlooking since I'm very new to this. The documentation seems to suggest that all references to __dirname are handled but clearly isn't. I know of several other teams that are using the library successfully on the browser (but they don't use Vite).

[ysageev]

I am having the same problem with jimp.js. The offending line is

const dir = process.env.DIRNAME || ${__dirname}/../;

I tried to set DIRNAME in my root .env file but I keep getting the same error message:

Uncaught ReferenceError: __dirname is not defined at node_modules/@jimp/plugin-print/es/index.js

Is there a way to set or activate __dirname so that a module which I don't control can consume it?

[jimzer]

I have the same problem with Sharp 😅 in a SvelteKit app with the node-adapter

[canastro]

@jimzer were you able to fix this?

[chenxch]

Please check the type in your package.json, if it is module, you need to define __dirname in the following way:

import { resolve, dirname } from 'path'
import { fileURLToPath } from 'url'

const __filename = fileURLToPath(import.meta.url)
const __dirname = dirname(__filename)

[Inventsable]

In my case I'm trying to use Vite alongside Electron and whenever I import something like BrowserWindow from it, I'll get this exact error. My type is not module, no preload or online solutions I've tried have worked so far, and the error is in Electron's own index.js file though curiously only gets thrown when I attempt to use IRC or BrowserWindow and not when I'm actually running the Electron app itself.