JavaScript

How To Fix ReferenceError: __dirname is not defined

Advertisements

I recently tried to use __dirname inside a ES module. It turns out, that I cannot. It throws an error. So let us see how To Fix ReferenceError: __dirname is not defined.

For people who do not know what it is, let us first discuss what __dirname is.

__dirname is a global variable in Node.js that can be used to reference the directory name of the current module.

We can use import.meta.url and fileURLToPath to get the name of the directory in ES modules.

import { fileURLToPath } from 'url';
import { dirname } from 'path';

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

We are importing the dirname function from the Node.js path module. import.meta is a property that can be used to access context-specific metadata of an ES module.

import.meta.url gives us the URL of the current module (including query parameters and/or hash if they exist). Using the combination of these properties, we are able to replicate __dirname functionality in an ES module and able to fix the “__dirname is not defined in ES module scope” error.

Saransh Kataria

Born in Delhi, India, Saransh Kataria is the brain behind Wisdom Geek. Currently, Saransh is a software developer at a reputed firm in Austin, and he likes playing with new technologies to explore different possibilities. He holds an engineering degree in Computer Science. He also shares his passion for sharing knowledge as the community lead at Facebook Developer Circle Delhi, NCR which is a developer community in Delhi, India.

Share
Published by
Saransh Kataria

Recent Posts

How To Get The Hash of A File In Node.js

While working on a project, I wanted to do an integrity check of a file…

2 weeks ago

Native popover API in HTML

Popovers have been a problem that was typically solved by using a third-party solution. But…

3 weeks ago

Node.js 20.6 adds built-in support for .env files

Node.js 20.6 added built-in support for the .env file. This is an excellent addition to the platform…

4 weeks ago

Object destructuring in TypeScript

Object destructuring is a powerful ES 6 feature that can help developers write cleaner code.…

1 month ago

Improve git clone performance in a CI pipeline

Have you felt particularly annoyed by the time it takes to clone a large repository,…

2 months ago

Fix: Hydration failed because the initial UI does not match what was rendered on the server

Within a React or Next.js app, if you encounter the error "Hydration failed because the…

2 months ago
Advertisements