Markdown Extension Compatibility Issue: markdown-it-header-sections

[Enteleform]

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

Bug report

Version

1.0.0-alpha.32

Steps to reproduce

Follow the Getting Started > Inside An Existing Project instructions from the VuePress documentation.

Install markdown-it-header-sections and set it up @ .vuepress/config.js

module.exports = {
  markdown: {
    extendMarkdown: md => {
      md.use(require("markdown-it-header-sections"))
    }
  }
}

Execute the NPM script:
docs:dev

What is expected?

The development server will start and markdown-it-header-sections will be applied to the rendered page.

What is actually happening?

The following exception is thrown:

D:\Projects\Proposals\2019-01-18--ClyphX Features--VuePress>npm run docs:dev

> 2019-01-18--clyphx-features@1.0.0 docs:dev D:\Projects\Proposals\2019-01-18--ClyphX Features--VuePress
> vuepress dev docs

wait Extracting site metadata...
tip Apply theme @vuepress/theme-default
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") ...
TypeError: Cannot read property '1' of undefined
  at tokens.forEach (D:\Projects\Proposals\2019-01-18--ClyphX Features--VuePress\node_modules\@vuepress\shared-utils\lib\extractHeaders.js:29:67)
  at Array.forEach (<anonymous>)
  at module.exports (D:\Projects\Proposals\2019-01-18--ClyphX Features--VuePress\node_modules\@vuepress\shared-utils\lib\extractHeaders.js:24:12)
  at Page.process (D:\Projects\Proposals\2019-01-18--ClyphX Features--VuePress\node_modules\@vuepress\core\lib\prepare\Page.js:111:25)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! 2019-01-18--clyphx-features@1.0.0 docs:dev: `vuepress dev docs`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the 2019-01-18--clyphx-features@1.0.0 docs:dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Fico\AppData\Roaming\npm-cache\_logs\2019-01-18T14_29_05_718Z-debug.log

 
I managed to avoid the exception & run docs:dev successfully by altering node_modules\@vuepress\shared-utils\lib\extractHeaders.js. However, in doing so, the sidebar: auto front-matter feature is no longer functional (no entries are populated). It seems that the issue is that the header extraction method is not compatible with the HTML structure created by markdown-it-header-sections.

Original:

tokens.forEach((t, i) => {
  // @ts-ignore
  if (t.type === 'heading_open' && include.includes(t.tag)) {
    const title = tokens[i + 1].content;
    // @ts-ignore
    const slug = (t.attrs).find(([name]) => name === 'id')[1];
    res.push({
      level: parseInt(t.tag.slice(1), 10),
      title: deeplyParseHeaders_1.default(title),
      slug: slug || md.slugify(title)
    });
  }
});

Modified:

tokens.forEach((t, i) => {
  // @ts-ignore
  if (t.type === 'heading_open' && include.includes(t.tag)) {
    const title = tokens[i + 1].content;
    // @ts-ignore
    const slug = (t.attrs).find(([name]) => name === 'id');  // find() instead of find()[0]
    if(slug){                                                // check if find() result is defined
      res.push({
        level: parseInt(t.tag.slice(1), 10),
        title: deeplyParseHeaders_1.default(title),
        slug: slug[0] || md.slugify(title)                   // find()[0] here, now that its existence is confirmed
      });
    }
  }
});

Other relevant information

• Your OS: Windows 10
• Node.js version: 11.5.0
• Is this a global or local install? local
• Which package manager did you use for the install? yarn

[ulivz]

It seems that the issue is that the header extraction method is not compatible with the HTML structure created by markdown-it-header-sections.

So this issue should be addressed by markdown-it-header-sections instead of here.