So I started on renewing the Stackedit project. I upgraded all dependencies and updated to ES6. The app is already starting but once I get to the Vue part of the application localhost:8080/app I get this error

Uncaught TypeError: Cannot read properties of undefined (reading 'addSupport')
    at prism.js:9669:1
    at ./node_modules/prismjs/prism.js (prism.js:9670:2)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./src/extensions/markdownExtension.js (markdownItTasklist.js:40:2)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./src/extensions/index.js (emojiExtension.js:13:3)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)

To replicate this error. Here are the steps to do:

1. Clone the repository: https://github.com/SamTV12345/stackedit
2. If on Windows you need to install besides Python 3.9 and above the Visual Studio Build Tools (C for desktop development)
3. npm install
4. npm start
5. Enter the browser localhost:8080
6. Click on the Start Writing pencil.
7. Blank page with the error in the console tab of the browser

I tried to track down the error but I can't find the origin. Everything seems to be linked to webpack but I'm also not getting any error when installing the dependencies. Is this a bug in prismJS?

Referenced code occurencences:

1. markdownItTasklist.js:40:2

function attrSet(token, name, value) {
  const index = token.attrIndex(name);
  const attr = [name, value];

  if (index < 0) {
    token.attrPush(attr);
  } else {
    token.attrs[index] = attr;
  }
}

export default (md) => {
  md.core.ruler.after('inline', 'tasklist', ({ tokens, Token }) => {
    for (let i = 2; i < tokens.length; i  = 1) {
      const token = tokens[i];
      if (token.content
        && token.content.charCodeAt(0) === 0x5b /* [ */
        && token.content.charCodeAt(2) === 0x5d /* ] */
        && token.content.charCodeAt(3) === 0x20 /* space */
        && token.type === 'inline'
        && tokens[i - 1].type === 'paragraph_open'
        && tokens[i - 2].type === 'list_item_open'
      ) {
        const cross = token.content[1].toLowerCase();
        if (cross === ' ' || cross === 'x') {
          const checkbox = new Token('html_inline', '', 0);
          if (cross === ' ') {
            checkbox.content = '<span  type="checkbox">&#9744;</span>';
          } else {
            checkbox.content = '<span  type="checkbox">&#9745;</span>';
          }
          token.children.unshift(checkbox);
          token.children[1].content = token.children[1].content.slice(3);
          token.content = token.content.slice(3);
          attrSet(tokens[i - 2], 'class', 'task-list-item');
        }
      }
    }
  })
}

import './emojiExtension.js';
import './abcExtension.js';
import './katexExtension.js';
import './markdownExtension.js';
import './mermaidExtension.js';

CodePudding user response：

The issue was a bug in PrismJS. After downgrading to an older version it worked flawlessly.