"Building for Production" docs "Library Mode" section mildly broken

Describe the bug

Based on;

• https://vitejs.dev/guide/#scaffolding-your-first-vite-project
• https://github.com/vitejs/vite/blame/5ea70b3c3cd5f208471338c5832a3eba1aafb01d/docs/guide/build.md#L117-L185

npm create vite@latest myapp --template vanilla
cd myapp

echo "import { resolve } from 'path'
import { defineConfig } from 'vite'
export default defineConfig({
  build: {
    lib: {
      entry: resolve(__dirname, 'lib/main.js'),
      name: 'MyLib',
      // the proper extensions will be added
      fileName: 'my-lib'
    },
    rollupOptions: {
      // make sure to externalize deps that shouldn't be bundled
      // into your library
      external: ['vue'],
      output: {
        // Provide global variables to use in the UMD build
        // for externalized deps
        globals: {
          vue: 'Vue'
        }
      }
    }
  }
})" > vite.config.js

mkdir lib
echo "export default function square(n) {
  return n*n;
}" > lib/main.js

echo '{
  "name": "my-lib",
  "type": "module",
  "files": ["dist"],
  "main": "./dist/my-lib.umd.cjs",
  "module": "./dist/my-lib.js",
  "exports": {
    ".": {
      "import": "./dist/my-lib.js",
      "require": "./dist/my-lib.umd.cjs"
    }
  }
}' > package.json

npm install
npm exec vite build

Expected

Library builds by copying documentation verbatim.

Actual behavior

$ npm exec vite build
failed to load config from /home/user/workspace/myapp/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 '/home/user/workspace/myapp/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
    at file:///home/user/workspace/myapp/vite.config.js?t=1657918746154:6:22
    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/user/workspace/myapp/node_modules/vite/dist/node/chunks/dep-561c5231.js:62653:31)
    at async resolveConfig (file:///home/user/workspace/myapp/node_modules/vite/dist/node/chunks/dep-561c5231.js:62281:28)
    at async doBuild (file:///home/user/workspace/myapp/node_modules/vite/dist/node/chunks/dep-561c5231.js:43272:20)
    at async build (file:///home/user/workspace/myapp/node_modules/vite/dist/node/chunks/dep-561c5231.js:43261:16)
    at async CAC.<anonymous> (file:///home/user/workspace/myapp/node_modules/vite/dist/node/cli.js:747:9)

Problem

Use of __dirname in the provided vite.config.js conflicts with the subsequent recommended package.json which recommends "type": "module".

Proposed solution

Each documentation section should be internally consistent such that a new user can follow the recommendations in that section without getting sidetracked by finding solutions to problems the docs have baked in.

Here the docs should probably do one of the following:

• Refrain from using __dirname when recommending use of "type": "module" in package.json
• Don’t recommend use of "type": "module" in package.json when using __dirname in vite.config.js
• Include a work-around such as those listed here in vite.config.js

Related (but not duplicate) issues

• https://github.com/vitejs/vite/issues/6946
• https://github.com/vitejs/vite/issues/9109
• https://github.com/nodejs/help/issues/2907

Reproduction

Included in bug description

System Info

Not really relevant, but


$ node --version
v18.5.0


`vite@3.0.0`

Used Package Manager

npm

Logs

No response

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.

[sodatea]

🤔Though the bugs are fixed, I think we should refrain from using __dirname with type: module. Not all environments have __dirname polyfilled. It’s not a good practice anyway.

[bluwy]

This should be fixed in https://github.com/vitejs/vite/pull/9121 which isn’t released yet. It will use esbuild to polyfill __dirname so it works here too.