javascriptvue.jsprismjs

Uncaught Typeerror: Cannot read properties of undefined (reading 'addSupport')


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 class="task-list-item-checkbox" type="checkbox">&#9744;</span>';
          } else {
            checkbox.content = '<span class="task-list-item-checkbox checked" 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';

Solution

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