✘ [ERROR] The symbol "__dirname" has already been declared

[mirzaahmedov]

Describe the bug

my vite.config.js

import path from "path";
import { defineConfig } from "vite";
import { svelte } from "@sveltejs/vite-plugin-svelte";
import preprocess from "svelte-preprocess";

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    svelte({
      preprocess: preprocess(),
    }),
  ],
  resolve: {
    alias: {
      "@views": path.resolve(__dirname, "src/views"),
      "@components": path.resolve(__dirname, "src/components"),
      "@/assets": path.resolve(__dirname, "src/assets"),
      "@utils": path.resolve(__dirname, "src/utils"),
      "@hooks": path.resolve(__dirname, "src/hooks"),
      "@context": path.resolve(__dirname, "src/context"),
    },
  },
});

if I run npm run dev I get "✘ [ERROR] The symbol "__dirname" has already been declared" error
if I remove type: "module" from package.json everything works fine

Reproduction

npm run dev

System Info

System:
    OS: Linux 5.18 Arch Linux
    CPU: (4) x64 Intel(R) Core(TM) i5 CPU       M 560  @ 2.67GHz
    Memory: 1.18 GB / 3.76 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 18.5.0 - /usr/bin/node
    npm: 8.13.2 - /usr/bin/npm
  Browsers:
    Brave Browser: 103.1.41.96
    Chromium: 103.0.5060.114
    Firefox: 102.0.1

Used Package Manager

npm

Logs

✘ [ERROR] The symbol "__filename" has already been declared

    vite.config.js:6:6:
      6 │ const __filename = import.meta.url;
        ╵       ~~~~~~~~~~

  The symbol "__filename" was originally declared here:

    vite.config.js:1:62:
      1 │ ...edov/Web/Svelte/Learn";const __filename = "/home/mirzaahmedov/Web/S...
        ╵                                 ~~~~~~~~~~

✘ [ERROR] The symbol "__dirname" has already been declared

    vite.config.js:7:6:
      7 │ const __dirname = path.dirname(__filename);
        ╵       ~~~~~~~~~

  The symbol "__dirname" was originally declared here:

    vite.config.js:1:6:
      1 │ const __dirname = "/home/mirzaahmedov/Web/Svelte/Learn";const __filena...
        ╵       ~~~~~~~~~

failed to load config from /home/mirzaahmedov/Web/Svelte/Learn/vite.config.js
error when starting dev server:
Error: Build failed with 2 errors:
vite.config.js:6:6: ERROR: The symbol "__filename" has already been declared
vite.config.js:7:6: ERROR: The symbol "__dirname" has already been declared
    at failureErrorWithLog (/home/mirzaahmedov/Web/Svelte/Learn/node_modules/esbuild/lib/main.js:1605:15)
    at /home/mirzaahmedov/Web/Svelte/Learn/node_modules/esbuild/lib/main.js:1251:28
    at runOnEndCallbacks (/home/mirzaahmedov/Web/Svelte/Learn/node_modules/esbuild/lib/main.js:1034:63)
    at buildResponseToResult (/home/mirzaahmedov/Web/Svelte/Learn/node_modules/esbuild/lib/main.js:1249:7)
    at /home/mirzaahmedov/Web/Svelte/Learn/node_modules/esbuild/lib/main.js:1358:14
    at /home/mirzaahmedov/Web/Svelte/Learn/node_modules/esbuild/lib/main.js:666:9
    at handleIncomingPacket (/home/mirzaahmedov/Web/Svelte/Learn/node_modules/esbuild/lib/main.js:763:9)
    at Socket.readFromStdout (/home/mirzaahmedov/Web/Svelte/Learn/node_modules/esbuild/lib/main.js:632:7)
    at Socket.emit (node:events:537:28)
    at addChunk (node:internal/streams/readable:324:12)

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[bluwy]

See https://vitejs.dev/config/#configuring-vite. Removing the __filename and __dirname variables should fix it.

[mirzaahmedov]

See https://vitejs.dev/config/#configuring-vite. Removing the __filename and __dirname variables should fix it.

But I am getting this

failed to load config from /home/mirzaahmedov/Web/Svelte/Learn/vite.config.js
error when starting dev server:
ReferenceError: __dirname is not defined in ES module scope
This file is being treated as an ES module because it has a '.js' file extension and '/home/mirzaahmedov/Web/Svelte/Learn/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
    at file:///home/mirzaahmedov/Web/Svelte/Learn/vite.config.js?t=1657804339765:18:30
    at ModuleJob.run (node:internal/modules/esm/module_job:198:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:409:24)
    at async loadConfigFromFile (file:///home/mirzaahmedov/Web/Svelte/Learn/node_modules/vite/dist/node/chunks/dep-561c5231.js:62653:31)
    at async resolveConfig (file:///home/mirzaahmedov/Web/Svelte/Learn/node_modules/vite/dist/node/chunks/dep-561c5231.js:62281:28)
    at async createServer (file:///home/mirzaahmedov/Web/Svelte/Learn/node_modules/vite/dist/node/chunks/dep-561c5231.js:58899:20)
    at async CAC.<anonymous> (file:///home/mirzaahmedov/Web/Svelte/Learn/node_modules/vite/dist/node/cli.js:699:24)

[bluwy]

I can't reproduce this. Are you using an older version of Vite? If not it would be helpful if you can provide a repro. There's also #9112 which may be similar to yours.

[JackBailey]

I'm having the same issue, using Vite v3.0.0 and the Vue template

[bluwy]

Ah ok thanks for the hint. I can reproduce it locally too.

[bluwy]

This seems to happen in Vite 2 too. Looks like we're not handling this scenario well.

vite/packages/vite/src/node/config.ts

Lines 876 to 880 in 42a6d5b

	// using Function to avoid this from being compiled away by TS/Rollup
	// append a query so that we force reload fresh config in case of
	// server restart
	userConfig = (await dynamicImport(`${fileUrl}?t=${Date.now()}`)).default
	debug(`native esm config loaded in ${getTime()}`, fileUrl)

[mirzaahmedov]

Created repo
Reproduction

And also having issue with svelte and sass. Non of my aliases working inside of style tags

<style lang="scss">
 @use "@/styles/global.scss";
</style>