ERR_REQUIRE_ESM when attempting to use vitepress-sidebar

[boozedog]

Describe the bug A clear and concise description of what the bug is.

I can't seem to get this plugin to work with vitepress.

Installed using npm i -D vitepress-sidebar

Added following to my config.js:

import { generateSidebar } from 'vitepress-sidebar';

...

sidebar: generateSidebar({
      root: 'docs',

Here's the error I'm getting when I run npm run docs:dev:

failed to load config from /home/test/docs/.vitepress/config.js
failed to start server. error:
Error [ERR_REQUIRE_ESM]: require() of ES Module /home/test/node_modules/vitepress-sidebar/dist/index.js from /home/test/docs/.vitepress/config.js not supported.
Instead change the require of index.js in /home/test/docs/.vitepress/config.js to a dynamic import() which is available in all CommonJS modules.
    at _require.extensions.<computed> [as .js] (file:///home/test/node_modules/vite/dist/node/chunks/dep-f7d05e3f.js:64439:17)
    at Object.<anonymous> (/home/test/docs/.vitepress/config.js:26:32)
    at _require.extensions.<computed> [as .js] (file:///home/test/node_modules/vite/dist/node/chunks/dep-f7d05e3f.js:64436:24)
    at loadConfigFromBundledFile (file:///home/test/node_modules/vite/dist/node/chunks/dep-f7d05e3f.js:64444:21)
    at async loadConfigFromFile (file:///home/test/node_modules/vite/dist/node/chunks/dep-f7d05e3f.js:64300:28)
    at async resolveUserConfig (file:///home/test/node_modules/vitepress/dist/node/serve-998e6cdd.js:11123:27)
    at async resolveConfig (file:///home/test/node_modules/vitepress/dist/node/serve-998e6cdd.js:11060:48)
    at async createServer (file:///home/test/node_modules/vitepress/dist/node/serve-998e6cdd.js:37208:18)
    at async createDevServer (file:///home/test/node_modules/vitepress/dist/node/cli.js:316:20

To Reproduce Steps to reproduce the behavior:

See above

Expected behavior A clear and concise description of what you expected to happen.

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. Windows 10]
• Browser [e.g. Chrome, Safari]

Additional context Add any other context about the problem here.

[boozedog]

Figured it out. I needed to add following to package.json

{
  "type" : "module",
...

[jooy2]

Hello. Thank you for using the vitepress-sidebar module.
vitepress-sidebar is an ESM module. If your project is using CJS, you will need to convert it to an ESM module.

For more information about the ESM module, see below:
https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c

To address these issues, there are several solutions below:

Solution A: if you are trying to use it with a CJS project, change the file extension from .js to .mjs and try again. You can define that you want to use the module script for a specific file.'

Solution B: in the package.json file, add the line "type": "module" line. This may require the project to be converted to an ESM project.

{
  "name": "docs",
  "type": "module", // <-- Add this
  "version": "1.0.0",
  "scripts": {
    "dev": "vitepress dev src",
    "build": "vitepress build src",
    "serve": "vitepress serve src"
  }
}

If the problem persists, please leave a reply.

Regards,

[jooy2]

Oh, I'm glad to hear you fixed it while I was answering, I'll save the above comment for someone later.

[boozedog]

Oh, I'm glad to hear you fixed it while I was answering, I'll save the above comment for someone later.

Thanks for your help @jooy2 ! Really impressed with this plugin.