"__dirname is not defined in ES module scope" in vite.config.js with module type in package.json

[KonradHoeffner]

Describe the bug

According to https://vitejs.dev/config/, vite.config.js may use ES module syntax and will replace __dirname. However when doing this in the following multi-page vite.config.js, it will fail.

vite.config.js

import { resolve } from "path";

export default {
    sourcemap: true,
    build: {
        rollupOptions: {
            input: {
                primary: resolve(__dirname, "index.html"),
                secondary: resolve(__dirname, "secondary.html"),
            },
            output: {
                assetFileNames: "assets/[name][extname]",
            },
        },
    },
};

package.json

{
  "name": "multipage-bug",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "vite": "^2.8.0"
  }
}

Reproduction

https://github.com/KonradHoeffner/multipage-bug

System Info

System:
    OS: Linux 5.12 Arch Linux
    CPU: (8) x64 Intel(R) Core(TM) i7-9700 CPU @ 3.00GHz
    Memory: 10.60 GB / 15.42 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 17.3.1 - /usr/bin/node
    npm: 8.5.0 - /usr/bin/npm
  Browsers:
    Chromium: 98.0.4758.80
  npmPackages:
    vite: ^2.8.0 => 2.8.3

Used Package Manager

npm

Logs

$ npm run build --debug

> [email protected] build
> vite build

failed to load config from /tmp/multipage-bug/vite.config.js
error during build:
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 '/tmp/multipage-bug/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
    at file:///tmp/multipage-bug/vite.config.js?t=1645018227925:8:34
    at ModuleJob.run (node:internal/modules/esm/module_job:195:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:337:24)
    at async importModuleDynamicallyWrapper (node:internal/vm/module:437:15)
    at async loadConfigFromFile (/tmp/multipage-bug/node_modules/vite/dist/node/chunks/dep-f9d9421a.js:71310:31)
    at async resolveConfig (/tmp/multipage-bug/node_modules/vite/dist/node/chunks/dep-f9d9421a.js:70848:28)
    at async doBuild (/tmp/multipage-bug/node_modules/vite/dist/node/chunks/dep-f9d9421a.js:38955:20)
    at async build (/tmp/multipage-bug/node_modules/vite/dist/node/chunks/dep-f9d9421a.js:38943:16)
    at async CAC.<anonymous> (/tmp/multipage-bug/node_modules/vite/dist/node/cli.js:738:9)

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 https://github.com/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.

[ydcjeff]

This is expected and error is coming from Node. When you set type: module in package.json, Node will treat all JS files as ES module and __dirname is not available in ES module. You need to write your own __dirname variable. There is a reference example from antfu.

[KonradHoeffner]

Thanks for the link! However this is not mentioned in the documentation, which says that Vite will replace it:

Note that Vite will replace __filename, __dirname, and import.meta.url

Would it be possible to extend the Vite documentation so that other people don't have the same problem in the future?
I suggest changing the wording like this:

Note that Node will replace __filename, __dirname, and import.meta.url, but only when type: module is not present in package.json.

[Niputi]

the error message is also pretty clear

[KonradHoeffner]

In hindsight I agree but I was so fixated on Vite as it is written in the documentation ("Vite will replace") that I did not even consider that I have to do something with Node but thought this was a failure in some hidden Vite preprocessing step.