DOMException: Failed to execute 'querySelector' on 'Document': '.vp=sidebar xxx' is not a valid selector

[tzfun]

• [x] I confirm that this is an issue rather than a question.

Bug report

Steps to reproduce

Normal use will result in an error.

I found the problem in the source code.

File position:

node_modules/.pnpm/@vuepress+theme-default@2.0.0-rc.35_vuepress@2.0.0-rc.13/node_modules/@vuepress/theme-default/lib/client/components/VPSidebarItems.vue

Bug:

Fix:

     // get the active sidebar item DOM, whose href equals to the current route
      const activeSidebarItem = document.querySelector(
        `.vp-sidebar a.vp-sidebar-item[href="${route.path}${hash}"]`,
      )

Simply: the selector is .vp-sidebar, not .vp=sidebar

Other relevant information

• Output of npx vuepress info in my VuePress project:

  System:
    OS: Windows 10 10.0.19045
    CPU: (6) x64 Intel(R) Core(TM) i5-9400F CPU @ 2.90GHz
    Memory: 16.38 GB / 31.94 GB
  Binaries:
    Node: 22.2.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.21 - D:\nodejs\node_global\yarn.CMD
    npm: 10.7.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 7.20.0 - ~\AppData\Local\pnpm\pnpm.EXE
    bun: Not Found
  Utilities:
    Git: 2.27.0.
  Browsers:
    Chrome: 125.0.6422.142
    Edge: Chromium (126.0.2592.56)
  npmPackages:
    @vuepress/bundler-vite: ^2.0.0-rc.13 => 2.0.0-rc.13
    @vuepress/bundler-webpack: Not Found
    @vuepress/cli: Not Found
    @vuepress/client: ^2.0.0-rc.13 => 2.0.0-rc.13
    @vuepress/core: Not Found
    @vuepress/markdown: Not Found
    @vuepress/shared: Not Found
    @vuepress/utils: 2.0.0-rc.13 => 2.0.0-rc.13
    vue: ^3.4.0 => 3.4.27
    vue-router: Not Found
    vuepress: ^2.0.0-rc.13 => 2.0.0-rc.13

[flemming-n-larsen]

I have run into the same issue this weekend with VuePress 2. It happens whenever I click a sub-item on the sidebar, i.e. when the sidebarDepth > 0.

My code is available here under the buildDocs directory: https://github.com/robocode-dev/tank-royale/tree/vuepress2-upgrade

Output of running npx vuepress info:

  System:
    OS: Windows 11 10.0.22631
    CPU: (12) x64 AMD Ryzen 5 5600G with Radeon Graphics         
    Memory: 22.82 GB / 31.80 GB
  Binaries:
    Node: 20.14.0 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 10.8.1 - ~\AppData\Roaming\npm\npm.CMD
    pnpm: Not Found
    bun: Not Found
  Utilities:
    Git: 2.45.2.
  Browsers:
    Chrome: Not Found
    Edge: Chromium (120.0.2210.61)
  npmPackages:
    @vuepress/bundler-vite: ^2.0.0-rc.13 => 2.0.0-rc.13
    @vuepress/bundler-webpack: Not Found
    @vuepress/cli:  2.0.0-rc.13
    @vuepress/client:  2.0.0-rc.13
    @vuepress/core:  2.0.0-rc.13
    @vuepress/markdown:  2.0.0-rc.13
    @vuepress/shared:  2.0.0-rc.13
    @vuepress/utils:  2.0.0-rc.13
    vue:  3.4.29
    vue-router:  4.3.3
    vuepress: ^2.0.0-rc.13 => 2.0.0-rc.13

This is my package.json:

  "devDependencies": {
    "@vuepress/bundler-vite": "^2.0.0-rc.13",
    "@vuepress/theme-default": "^2.0.0-rc.35",
    "footnote": "^1.1.0",
    "katex": "^0.16.10",
    "mermaid": "^10.9.1",
    "vuepress": "^2.0.0-rc.13",
    "vuepress-plugin-md-enhance": "^2.0.0-rc.48"
  }

This is my config.ts:

import { viteBundler } from '@vuepress/bundler-vite'
import { defaultTheme } from '@vuepress/theme-default'
import { defineUserConfig } from 'vuepress'
import { mdEnhancePlugin } from 'vuepress-plugin-md-enhance'

export default defineUserConfig({
  lang: 'en-US',
  title: 'Robocode Tank Royale Docs',
  description: 'Documentation for the programming game Robocode Tank Royale.',

  base: '/tank-royale/',
  port: 8080,
  dest: 'build/docs',

  head: [['link', { rel: 'icon', href: '/favicon.ico' }]],

  bundler: viteBundler(),

  theme: defaultTheme({

    logo: '/Tank-logo.svg',

    colorMode: 'dark',
    colorModeSwitch: false,

    sidebar: [
      '/articles/intro',
      '/articles/installation',
      '/articles/gui',
      '/tutorial/my-first-bot',
      '/api/apis',
      '/articles/debug',
      '/articles/anatomy',
      '/articles/coordinates-and-angles',
      '/articles/physics',
      '/articles/scoring',
      '/articles/booter',
      '/articles/tank-royale',
      '/articles/history',
    ],

    contributors: false,
  }),

  plugins: [
    mdEnhancePlugin({
      katex: true,
      mermaid: true,
      footnote: true,
    })
  ],
});

Screenshot: When I click the Introduction sub-item under the Menu named What is Robocode? in the sidebar, the error occur: