1

I want to use Mathjax on my website. I put in the <head> section of public/index.html:

<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

And, in my component :

<template>
    <div v-html="note_content"></div>
</template>

<script>
import { typeset, dummy_typeset } from '../assets/js/text_processing.js';
import showdown from 'showdown';

const converter = new showdown.Converter({ tables: true });

export default {
    data () {
        return {
        }
    },
    computed: {
        note_content: function() {
            return typeset(this.exchange_data);
        }
    },
    props: ['exchange_data'],
    watch: {
        note_content: function() {
            Mathjax.typesetPromise();
        }
    }
}
</script>

However on runtime, I get the error :

Uncaught (in promise) ReferenceError: Mathjax is not defined

What I do not understand is that the css which is located in the head of public/index.html is correctly loaded and rendered in the component. Also I read elsewhere that loading external javascript this way should make it available to all components. What is wrong ?

vkubicki
  • 1,104
  • 1
  • 11
  • 26

2 Answers2

1

I think it is connected to webpack config, but i might be wrong. Anyway, have you tried this method?

How to add external JS scripts to VueJS Components?

It enforces the script to be loaded.

turkishpeter
  • 44
  • 2
  • 5
  • I tried to put the mathjax javascript in the `src/assets` directory and then load it using `import '../assets/ext/polyfill.min.js?features=es6'`; and `import '../assets/ext/tex-mml-chtml.js';` . I still gt the error that Mathjax is undefined, but now the imports are being processed. – vkubicki Sep 16 '21 at 21:35
  • Since I changed my approach I created a new question: https://stackoverflow.com/questions/69215530/import-bundled-mathjax-in-vue-component – vkubicki Sep 16 '21 at 21:48
  • Thank to your answer I understood that public is not processed by webpack and I am moving resources into `src/assets`. – vkubicki Sep 16 '21 at 21:49
  • I'm happy it worked out. Good luck with the project! – turkishpeter Sep 17 '21 at 06:37
  • I found the bug, this is ridiculous. – vkubicki Sep 17 '21 at 12:22
0

Contrarily to what is written at https://docs.mathjax.org/en/latest/web/typeset.html, the syntax for asynchronous rendering is not :

Mathjax.typesetPromise()

But (notice the case):

MathJax.typesetPromise()

The typo could be detected from the surrounding context.

Also not that to use typeset Mathjax in a Vue component, the virtual DOM should be processed before calling the typesetPromise method, so an example of working code would be:

watch: {
    note_content: function() {
        this.$nextTick(MathJax.typesetPromise);
    }
}
vkubicki
  • 1,104
  • 1
  • 11
  • 26