Vuepress error: Cannot read property of undefined (read 'match')

Question

An error occurred while trying to build my vuepress project, using the npm quick start guide: https://vuepress.vuejs.org/guide/getting-started.html#manual-installation

I added some pages and everything works fine:

npm run:dev

But when I want to generate html to docs/src/.vuepress:

npm run:build

dibTest@0.0.1 build
vuepress build src


wait Extracting site metadata...
tip Apply theme @vuepress/theme-default ...
tip Apply plugin container (i.e. "vuepress-plugin-container") ...
tip Apply plugin @vuepress/register-components (i.e. "@vuepress/plugin-register-components") ...
tip Apply plugin @vuepress/active-header-links (i.e. "@vuepress/plugin-active-header-links") ...
tip Apply plugin @vuepress/search (i.e. "@vuepress/plugin-search") ...
tip Apply plugin @vuepress/nprogress (i.e. "@vuepress/plugin-nprogress") ...
tip Apply plugin @vuepress/back-to-top (i.e. "@vuepress/plugin-back-to-top") ...
tip Apply plugin @vuepress/medium-zoom (i.e. "@vuepress/plugin-medium-zoom") ...
i Compiling Client
i Compiling Server
√ Server: Compiled successfully in 21.54s
√ Client: Compiled successfully in 33.41s
wait Rendering static HTML...
[vuepress] No matching page found for sidebar item "/index"
[Vue warn]: Error in render: "TypeError: Cannot read properties of undefined (reading 'match')"

found in

---> <SidebarLinks>
       <DropdownTransition>

[vuepress] No matching page found for sidebar item "/elements/attribute"
error Error rendering /: false
undefined
   
       TypeError: Cannot read properties of undefined (reading 'match')
    at getHash (node_modules/@vuepress/theme-default/util/index.js:13:21)
    at isActive (node_modules/@vuepress/theme-default/util/index.js:47:19)
    at render (node_modules/@vuepress/theme-default/components/SidebarLink.vue:25:0)
    at renderWithStyleInjection (node_modules/vue-loader/lib/runtime/componentNormalizer.js:83:0)
    at createFunctionalComponent (docsnode_modulesvuedistvue.runtime.common.dev.js:3071:30)
    at createComponent (docsnode_modulesvuedistvue.runtime.common.dev.js:3244:12)
    at _createElement (docsnode_modulesvuedistvue.runtime.common.dev.js:3436:15)
    at createElement (docsnode_modulesvuedistvue.runtime.common.dev.js:3368:10)
    at vm._c (docsnode_modulesvuedistvue.runtime.common.dev.js:3505:42)
    at 1.server-bundle.js:1006:492
    at Proxy.renderList (docsnode_modulesvuedistvue.runtime.common.dev.js:2640:16)
    at Proxy.SidebarLinksvue_type_template_id_1da4684a_render (node_modules/@vuepress/theme-default/components/SidebarLinks.vue?5fd7:1:152)
    at VueComponent.Vue._render (docsnode_modulesvuedistvue.runtime.common.dev.js:3559:22)
    at resolve (docsnode_modulesvue-server-rendererbuild.dev.js:8444:27)
    at waitForServerPrefetch (docsnode_modulesvue-server-rendererbuild.dev.js:8316:3)
    at renderComponentInner (docsnode_modulesvue-server-rendererbuild.dev.js:8455:3)

Answer 1

This error is caused by the following issue in my config.js

module.exports = {   

...

    sidebar: [
      '/',
      {
        title: 'Quick Start Guide',
        children: [
          '/overview/login.md',
          '/overview/model-list.md',
          '/overview/navigation.md,'
        ]
      }
    ]
  }
}

Pay attention to the "," after "navigation.md". For whatever reason, this results in the completely useless message above. Must be because it can't find the md file and then it gets undefined somewhere and tries to access it instead of detecting it and giving you a helpful message