Im having a problem with "ReferenceError: __dirname is not defined in ES module scope" error

import path from 'path'
import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'
import Pages from 'vite-plugin-pages'
import Layouts from 'vite-plugin-vue-layouts'
import Components from 'unplugin-vue-ponents/vite'
import AutoImport from 'unplugin-auto-import/vite'
import Unocss from 'unocss/vite'
import { campaign } from './package.json'



export default defineConfig({
  resolve: {
    alias: {
      '~/': `${path.resolve(__dirname, 'src')}/`,
    },
  },...

Can anyone provide a solution? Thank you so much!

Im having a problem with "ReferenceError: __dirname is not defined in ES module scope" error

import path from 'path'
import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'
import Pages from 'vite-plugin-pages'
import Layouts from 'vite-plugin-vue-layouts'
import Components from 'unplugin-vue-ponents/vite'
import AutoImport from 'unplugin-auto-import/vite'
import Unocss from 'unocss/vite'
import { campaign } from './package.json'



export default defineConfig({
  resolve: {
    alias: {
      '~/': `${path.resolve(__dirname, 'src')}/`,
    },
  },...

Can anyone provide a solution? Thank you so much!

• javascript
• vue.js
• vite
• dirname

4 Answers 4

As the error suggests, __dirname is not defined in the ES module scope.

Try this:

import url from 'url'

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

Now you can use __dirname in path.resolve()

Add @types/node npm package

npm i -D @types/node --save-exact

The solution is to update Node to the newest version. Vite dropped support for older ones. Thanks, everyone!

If you are facing the issue and recently installed module-alias Uninstalling module-alias and removing its related contents will fix the issues.