Unknown custom element: <color> at living documentation

[ManuLG]

System info

• Windows 10 (tried on Mac too)
• Node version: 12.18.2

Steps to reproduce

git clone https://github.com/viljamis/vue-design-system.git
cd vue-design-system
npm install
npm start

Then, when I go to http://localhost:6060/#/Design%20Tokens I see this:

I have "solved" the issue adding this to docs/doc.helper.js:

const contexts = [
  require.context("./components/status", true, /\.vue$/),
  require.context("./components/tokens", true, /\.vue$/),
  require.context("../src/elements/", true, /\.vue$/),
]

// Define components
const components = []
contexts.forEach(context => {
  context.keys().forEach(key => components.push(context(key).default))
})

components.forEach(component => Vue.component(component.name, component))

But, even with that "fix", I can't see any elements in the sidebar either:

[azahrandani]

Hi @ManuLG. I was having the same issue. But I also found so many of these errors when I ran npm start:

JSDOC_ERROR: /Users/mydoc/projects/vue-design-system/node_modules/requizzle/lib/requizzle.js:45
    if (lookupPaths[0] === targetPath && lookupPaths[1].length === 0) {
                   ^

TypeError: Cannot read property '0' of null
    at isNativeModule (/Users/mydoc/projects/vue-design-system/node_modules/requizzle/lib/requizzle.js:45:17)
    at Requizzle.requizzle (/Users/mydoc/projects/vue-design-system/node_modules/requizzle/lib/requizzle.js:82:6)
    at infectProxy (/Users/mydoc/projects/vue-design-system/node_modules/requizzle/lib/loader.js:82:28)
    at Module.targetModule.require (/Users/mydoc/projects/vue-design-system/node_modules/requizzle/lib/loader.js:101:11)
    at require (internal/modules/cjs/helpers.js:72:18)
    at Object.<anonymous> (/Users/mydoc/projects/vue-design-system/node_modules/jsdoc/lib/jsdoc/fs.js:7:10)
    at Module._compile (internal/modules/cjs/loader.js:1137:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
    at Module.load (internal/modules/cjs/loader.js:985:32)
    at Object.load (/Users/mydoc/projects/vue-design-system/node_modules/requizzle/lib/loader.js:112:15)

Warning: Cannot parse docs/components/status/Components.vue: Error: JSDOC_ERROR: /Users/mydoc/projects/vue-design-system/node_modules/requizzle/lib/requizzle.js:45
    if (lookupPaths[0] === targetPath && lookupPaths[1].length === 0) {
                   ^

TypeError: Cannot read property '0' of null
    at isNativeModule (/Users/mydoc/projects/vue-design-system/node_modules/requizzle/lib/requizzle.js:45:17)
    at Requizzle.requizzle (/Users/mydoc/projects/vue-design-system/node_modules/requizzle/lib/requizzle.js:82:6)
    at infectProxy (/Users/mydoc/projects/vue-design-system/node_modules/requizzle/lib/loader.js:82:28)
    at Module.targetModule.require (/Users/mydoc/projects/vue-design-system/node_modules/requizzle/lib/loader.js:101:11)
    at require (internal/modules/cjs/helpers.js:72:18)
    at Object.<anonymous> (/Users/mydoc/projects/vue-design-system/node_modules/jsdoc/lib/jsdoc/fs.js:7:10)
    at Module._compile (internal/modules/cjs/loader.js:1137:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
    at Module.load (internal/modules/cjs/loader.js:985:32)
    at Object.load (/Users/mydoc/projects/vue-design-system/node_modules/requizzle/lib/loader.js:112:15)

It usually means that vue-docgen-api does not understand your source code or when using third-party libraries, try to file an issue here:
https://github.com/vue-styleguidist/vue-docgen-api/issues

I was thinking the problem was in vue-docgen-api which was previously version 2.x.x. I then installed the module again manually to the newest version 4.35.0 and the problem was fixed!