Build not working with vite.config.ts and es-modules

[cimchd]

Describe the bug

My project is an es-modules-project (type="modules" in package.json). I run Node v16.1.0.

I added a vite.config.ts to my /docs folder to include WindiCSS in my Vitepress project:

// vite.config.ts
import { defineConfig } from 'vite';
import WindiCSS from 'vite-plugin-windicss';

export default defineConfig({
  plugins: [WindiCSS()],
});

I use the environment variable --experimental-specifier-resolution=node for running the scripts:

// package.json
{
// ...
  "scripts": {
    "docs:dev": "NODE_OPTIONS='--experimental-specifier-resolution=node' vitepress dev docs",
    "docs:build": "NODE_OPTIONS='--experimental-specifier-resolution=node' vitepress build docs",
    "docs:serve": "NODE_OPTIONS='--experimental-specifier-resolution=node' vitepress serve docs"
  }
// ...
}

docs:dev still works fine. But when I rund docs:build an error occurs:

failed to load config from /home/project/docs/vite.config.ts
✖ building client + server bundles...
build error:
 Error: ENOENT: no such file or directory, unlink '/home/project/docs/vite.config.ts.js'
    at Object.unlinkSync (node:fs:1709:3)
    at loadConfigFromFile (/home/project/node_modules/vitepress/node_modules/vite/dist/node/chunks/dep-3d5f2596.js:71321:29)
    at async resolveConfig (/home/project/node_modules/vitepress/node_modules/vite/dist/node/chunks/dep-3d5f2596.js:70861:28)
    at async doBuild (/home/project/node_modules/vitepress/node_modules/vite/dist/node/chunks/dep-3d5f2596.js:38954:20)
    at async Object.build (/home/project/node_modules/vitepress/node_modules/vite/dist/node/chunks/dep-3d5f2596.js:38942:16)
    at async Promise.all (index 1)
    at async bundle (/home/project/node_modules/vitepress/dist/node/serve-cf4b2162.js:40814:36)
    at async Object.build (/home/project/node_modules/vitepress/dist/node/serve-cf4b2162.js:41015:59) {
  errno: -2,
  syscall: 'unlink',
  code: 'ENOENT',
  path: '/home/project/docs/vite.config.ts.js'
}

If I rename the vite.config.ts to vite.config.js it seems that the build process continues until the next error occurs:

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /home/chd/gettherapie-webseite/cim-elements/docs/.vitepress/.temp/app.js
require() of ES modules is not supported.
require() of /home/project/docs/.vitepress/.temp/app.js from /home/project/node_modules/vitepress/dist/node/serve-cf4b2162.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename app.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /home/project/docs/package.json.

Reproduction

See above

Expected behavior

build should finish successfully

System Info

System:
    OS: Linux 4.19 Ubuntu 20.04 LTS (Focal Fossa)
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
    Memory: 1.38 GB / 19.55 GB
    Container: Yes
    Shell: 5.0.16 - /bin/bash
  Binaries:
    Node: 16.1.0 - /usr/local/bin/node
    Yarn: 3.1.1 - ~/.yarn/bin/yarn
    npm: 7.11.2 - /usr/local/bin/npm
  npmPackages:
    vitepress: ^0.22.2 => 0.22.2

Additional context

The project runs under a yarn workspace monorepo

If I remove the vite.config.ts the build works fine.

Validations

• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

[roblevintennis]

Argh, I got bit by this. I recently needed to update my library to use type: module ironically to get it to work with Astro which uses Vite and wanted my lib to either use type module or .mjs. So now I've come back to my Vitepress docs to build and get:

npm run docs:build

> agnosticui-website@1.0.1 docs:build
> vitepress build docs

vitepress v0.20.10
✓ building client + server bundles...
⠋ rendering pages...Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/roblevin/workspace/opensource/agnosticui/site/node_modules/agnostic-vue/dist/agnostic-vue.esm.js from /Users/roblevin/workspace/opensource/agnosticui/site/node_modules/vitepress/dist/client/app/temp/docs_components_alerts.md.js not supported.
Instead change the require of agnostic-vue.esm.js in /Users/roblevin/workspace/opensource/agnosticui/site/node_modules/vitepress/dist/client/app/temp/docs_components_alerts.md.js to a dynamic import() which is available in all CommonJS modules.
    at Module.<anonymous> (/Users/roblevin/workspace/opensource/agnosticui/site/node_modules/vitepress/dist/client/app/temp/docs_components_alerts.md.js:5:19)
    at /Users/roblevin/workspace/opensource/agnosticui/site/node_modules/vitepress/dist/client/app/temp/app.js:1368:12
    at loadPage (/Users/roblevin/workspace/opensource/agnosticui/site/node_modules/vitepress/dist/client/app/temp/assets/Debug.0ad90550.js:140:18)
    at Object.go (/Users/roblevin/workspace/opensource/agnosticui/site/node_modules/vitepress/dist/client/app/temp/assets/Debug.0ad90550.js:133:12)
    at renderPage (/Users/roblevin/workspace/opensource/agnosticui/site/node_modules/vitepress/dist/node/serve-b109daa0.js:40037:10)
    at Object.build (/Users/roblevin/workspace/opensource/agnosticui/site/node_modules/vitepress/dist/node/serve-b109daa0.js:40174:15) {
  code: 'ERR_REQUIRE_ESM'
}
...

I've got a good two dozen or so Vue examples e.g. Alert.vue component example scripts I'm pulling into the .md files so trying to figure out how to refactor them all to use dynamic imports (which I'm not very familiar with) seems prohibitive unless it's my only choice.

---

Update: If you happen to have control enough to build the offending package as I do, you can remove the type: module and Vitepress will be happy. I did this and repackaged the upstream library, then was able to pull in and npm run build my Vitepress docs, then set my upstream back to type: module. Not ideal and kludgy but a temporary workaround that worked for me.

[oieeaaaa]

nani