import katex as a module Laravel 9 with vite

Hello,

Using laravel 9 and vite.

I use katex to display equations. I do it form CDN and it works fine, but I am a bit paranoid of availability and wanted to include as a package. I followed instructions:

npm install katex

And inside my app.js

import katex from 'katex ';
window.katex = katex ;

Then, when I try to use katex inside script tag in any of my pages, I get JS error katex not defined. The error is thrown for example when following the steps at katex docs:

katex.render("c = \pm\sqrt{a^2 + b^2}", element, {
    throwOnError: false
});

I am quite new with JS modules, so probably I am doing something wrong. Just for te record, I use Alpine doing this exact procedure and it works. The only different thing is that the word katex is highlighted by my editor during assignation to window. It does not happen with any other module.

Any clue? Thanks

thinkverse

3 years ago

Best Answer

Level 15

Since Laravel and Vite use type="module" on script tags you also need to use type="module" in inline script tags.

<script type="module">
    katex.render("c = \pm\sqrt{a^2 + b^2}", element, {
        throwOnError: false
    });
</script>

LaraNewDev

3 years ago

Level 8

Thanks a lot, you saved me from madness. It works perfect.

Please or to participate in this conversation.