Provide example

[stefnotch]

I tried out this library, but couldn't quite get it to work.

My repository uses "type": "module" https://github.com/stefnotch/blog/blob/3d8572b060abdcb17ae90f0193766e2d51603214/package.json#L2 and has a minimal vite.config.ts file in the docs folder https://github.com/stefnotch/blog/blob/main/docs/vite.config.ts

When I start mine, I get the following confusing error

> vitepress dev docs

failed to load config from C:\Coding\GitHub\Other\Blog\docs\vite.config.ts
failed to start server. error:
file:///C:/Coding/GitHub/Other/Blog/docs/vite.config.ts.timestamp-1677749039970.mjs:2
import { SimpleSearch } from "file:///C:/Coding/GitHub/Other/Blog/node_modules/vitepress-plugin-simple-search/dist/simple-search.es.js";
         ^^^^^^^^^^^^
SyntaxError: Named export 'SimpleSearch' not found. The requested module 'file:///C:/Coding/GitHub/Other/Blog/node_modules/vitepress-plugin-simple-search/dist/simple-search.es.js' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'file:///C:/Coding/GitHub/Other/Blog/node_modules/vitepress-plugin-simple-search/dist/simple-search.es.js';
const { SimpleSearch } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)    
    at async ModuleJob.run (node:internal/modules/esm/module_job:190:5) 

OS: Windows 10
node --version: v18.14.0
npm --version: 9.3.1

[Stuyk]

Try not using module. I've had no issue with module on other vitepress sites I've created.

[stefnotch]

Vite should support the module type. Not using it means that I'd fall back to CommonJS (as I understand it) and then I get different importing semantics.

The big issue for me is that it breaks another library. That vitepress-sidebar, and potentially other libraries that I depend on have made the switch to ES Modules only.

// file: .vitepress/config.ts
import mk from "@traptitech/markdown-it-katex";
import { generateSidebar } from "vitepress-sidebar";
import { defineConfig } from "vitepress";
...

$ npm run dev

> dev
> vitepress dev docs

failed to load config from C:\Coding\GitHub\Other\Blog\docs\.vitepress\config.ts
failed to start server. error:
Error [ERR_REQUIRE_ESM]: require() of ES Module C:\Coding\GitHub\Other\Blog\node_modules\vitepress-sidebar\dist\index.js from C:\Coding\GitHub\Other\Blog\docs\.vitepress\config.ts not supported.
Instead change the require of index.js in C:\Coding\GitHub\Other\Blog\docs\.vitepress\config.ts to a dynamic import() which is available in all CommonJS modules.
    at _require.extensions.<computed> [as .js] (file:///C:/Coding/GitHub/Other/Blog/node_modules/vitepress/node_modules/vite/dist/node/chunks/dep-ca21228b.js:62359:17)
    at Object.<anonymous> (C:\Coding\GitHub\Other\Blog\docs\.vitepress\config.ts:37:32)
    at _require.extensions.<computed> [as .js] (file:///C:/Coding/GitHub/Other/Blog/node_modules/vitepress/node_modules/vite/dist/node/chunks/dep-ca21228b.js:62356:24)
    at loadConfigFromBundledFile (file:///C:/Coding/GitHub/Other/Blog/node_modules/vitepress/node_modules/vite/dist/node/chunks/dep-ca21228b.js:62364:21)
    at loadConfigFromFile (file:///C:/Coding/GitHub/Other/Blog/node_modules/vitepress/node_modules/vite/dist/node/chunks/dep-ca21228b.js:62222:34)
    at async resolveUserConfig (file:///C:/Coding/GitHub/Other/Blog/node_modules/vitepress/dist/node/serve-4ba8f51b.js:11083:27)
    at async resolveConfig (file:///C:/Coding/GitHub/Other/Blog/node_modules/vitepress/dist/node/serve-4ba8f51b.js:11021:48)
    at async createServer (file:///C:/Coding/GitHub/Other/Blog/node_modules/vitepress/dist/node/serve-4ba8f51b.js:36573:18)
    at async createDevServer (file:///C:/Coding/GitHub/Other/Blog/node_modules/vitepress/dist/node/cli.js:304:20)

[Stuyk]

That's interesting. I'm curious how I can even try to support both cases here since I never got modules to work correctly which is why I went with CommonJS here.

[stefnotch]

vitepress-sidebar seems to have been set up to only provide an ES Module variant
https://github.com/jooy2/vitepress-sidebar/blob/master/package.json
It includes "type": "module", in its package.json file

Vitepress itself seems to also have "type": "module", in its package.json file, however Vitepress also ships a CommonJS variant
https://github.com/vuejs/vitepress/blob/38bbdaddb72ec426865d731c2f443e545e5bbbd7/package.json#L5

It might be worthwhile to give something like that a shot?