The easiest way to get __dirname in Node with ES Modules

Published:

Getting the directory name (or short for dirname) is extremely simple in Node prior to ES Modules (ESM).

All we had to do was use the __dirname global variable.

console.log(__dirname) // This will show the directory

Unfortunately, __dirname is not supported in ES Modules. So if we want __dirname, we need to use a rather round-about way to retrieve it.

How to get dirname in ESM

The easiest way to get dirname in ESM is to use three utilities that Node provides us with

  • import.meta.url — This gives you the file path to the current file
  • fileUrlToPath — This strips away the file:// protocol so the URL can be used in path.
  • path — This is a utility you can use to specify paths in Node

The complete code looks like this:

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

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

This code can be really complicated to remember. So I abstracted it into a dirname function in Splendid UI.

The easier way to get dirname

First, install Splendid UI.

npm install splendid-ui

Then import dirname from the node subpath.

import { dirname } from 'splendid-ui/node'

Then you just have to pass the import.meta.url into dirname and you’ll get the __dirname value.

const __dirname = dirname(import.meta.url)

That’s it!

I hope this makes things easier for you when using Node :)

Further reading

Learn To Up Your Development Game

You'll get articles to help you improve your game as a web developer. These articles can be related to CSS, JavaScript, Astro, Svelte, or even general web development tips.