question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Sidebar Error `Invalid prop "items"` when creating sidebar inside of themeconfig

See original GitHub issue

Describe the bug

I cannot seem to get the sidebar working properly and get these warnings and errors when attempting to create one: image

Reproduction

My .vitepress/config.js file looks like this right now since I am just starting to write my documentation:

export default {
  title: 'Magnetar Docs',
  themeConfig: {
    nav: [
      {
        text: 'Changelog',
        link: 'https://github.com/CyCraft/magnetar/blob/production/CHANGELOG.md',
      },
      { text: 'Github', link: 'https://github.com/cycraft/magnetar' },
    ],
    // sidebar: [{ text: 'About', items: [{ text: 'About', link: '/docs-main/about' }] }],
    sidebar: [{ text: 'About', link: '/docs-main/about' }],
  },
}

I thought I was using the same syntax as the docs use, but I still get this error.

However, if I use the synax in the commented out code with the items array, I obviously don’t get the warnings and errors, but then the page looks like this and the second About route leads to a 404 page. It’s also not how I want my sidebar to look. image

Expected behavior

I just want my sidebar to look like it does in my quasar version, but obviously using vitepress. Simple sections with the subsections based on the markdown #, ##, ###'s. I see nothing in the documentation to help me achieve this however.

image

System Info

System:
    OS: macOS 12.5
    CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz
    Memory: 23.31 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.5.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 7.24.2 - /usr/local/bin/npm
  Browsers:
    Chrome: 104.0.5112.79
    Firefox: 90.0.2
    Firefox Developer Edition: 97.0
    Safari: 15.6
    Safari Technology Preview: 16.0

Additional context

My docs file list looks like this image

.vitepress/theme/index.js looks like

import DefaultTheme from 'vitepress/theme'
import './custom.css'

export default DefaultTheme

Perhaps it has to do with this? I doubt that though.

Validations

  • Follow our Code of Conduct
  • Read the docs.
  • Check that there isn’t already an issue that reports the same bug to avoid creating a duplicate.

Issue Analytics

  • State:open
  • Created a year ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
brc-ddcommented, Aug 7, 2022

Ah, let’s keep this issue open for now. We need to fix certain things like making text optional or allowing link directly at top level. This was reported on #846 too, but there too the OP closed it, so it went unnoticed.

0reactions
LovelyAndycommented, Aug 7, 2022

Awesome! Well thank you for the help and information!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Sidebar
This is a sidebars file that exports one sidebar, called mySidebar . It has three top-level items: two categories and one external link....
Read more >
Invalid prop 'component' supplied to 'Route': the prop is not ...
When I click button visit store, I'm getting the above error. ... created NotFound() component & included the same inside Route.js file.
Read more >
Semantic-Org/Semantic-UI-React - Gitter
Warning: Failed prop type: Invalid prop `error` supplied to `FormField`. ... I understand that adding Sticky component is erratic inside a Sidebar.
Read more >
Default Theme Config
Sidebar. To enable the sidebar, use themeConfig.sidebar . The basic configuration expects an Array of links: // .vuepress ...
Read more >
Flex UI Release Notes for v1.x.x
Restore loginHandler functionality inside Flex store. ... Fixed a bug where sometimes a permanent sidebar would be added. DTMF Dialpad component will now ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found