Vuepress TypeError: Cannot read properties of undefined (reading 'match')

Viewed 129

Error when trying to build my vuepress project, used this quickstart guide with npm: https://vuepress.vuejs.org/guide/getting-started.html#manual-installation

I added some pages and everything works fine with:

npm run:dev

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

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 (docs\node_modules\vue\dist\vue.runtime.common.dev.js:3071:30)
    at createComponent (docs\node_modules\vue\dist\vue.runtime.common.dev.js:3244:12)
    at _createElement (docs\node_modules\vue\dist\vue.runtime.common.dev.js:3436:15)
    at createElement (docs\node_modules\vue\dist\vue.runtime.common.dev.js:3368:10)
    at vm._c (docs\node_modules\vue\dist\vue.runtime.common.dev.js:3505:42)
    at 1.server-bundle.js:1006:492
    at Proxy.renderList (docs\node_modules\vue\dist\vue.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 (docs\node_modules\vue\dist\vue.runtime.common.dev.js:3559:22)
    at resolve (docs\node_modules\vue-server-renderer\build.dev.js:8444:27)
    at waitForServerPrefetch (docs\node_modules\vue-server-renderer\build.dev.js:8316:3)
    at renderComponentInner (docs\node_modules\vue-server-renderer\build.dev.js:8455:3)
1 Answers

This error for me was thrown by the following problem in my config.js

module.exports = {   

...

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

Note the "," after "navigation.md". For whatever reason this results in the totally unhelpful message above. Must be because it can't find that md file, it then gets an undefined somewhere and tries to access it, rather than detecting this and giving you a helpful message

Related