External javascript from public/index.html not loading in Vue component

Question

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 ?

What browser are you using? I'm having a comparable problem on Firefox. It might be a Firefox-compatibility issue: github.com/mathjax/MathJax/issues/2399 — Julian - BrainAnnex.org
– Julian - BrainAnnex.org, Commented Mar 26, 2022 at 23:43

turkishpeter · Accepted Answer · 2021-09-14 08:51:59Z

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.

answered Sep 14, 2021 at 8:51

turkishpeter

542 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

vkubicki Over a year ago

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 Over a year ago

Since I changed my approach I created a new question: stackoverflow.com/questions/69215530/…

vkubicki Over a year ago

Thank to your answer I understood that public is not processed by webpack and I am moving resources into src/assets.

turkishpeter Over a year ago

I'm happy it worked out. Good luck with the project!

vkubicki Over a year ago

I found the bug, this is ridiculous.

vkubicki · Accepted Answer · 2021-09-17 12:21:08Z

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);
    }
}

answered Sep 17, 2021 at 12:21

vkubicki

1,1241 gold badge12 silver badges27 bronze badges

Collectives™ on Stack Overflow

External javascript from public/index.html not loading in Vue component

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related