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:
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:
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">☐</span>';
} else {
checkbox.content = '<span class="task-list-item-checkbox checked" type="checkbox">☑</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';
The issue was a bug in PrismJS. After downgrading to an older version it worked flawlessly.