Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How should I use mhchem in vue?

See original GitHub issue

I have tried a lot of methods to get mhchem run. Not working.

Math equations are working fine. Math eq works fine

Here is my code:

I use a .js file to import katex

import katex from 'katex'
import "katex/dist/katex.min.css"
import 'katex/dist/contrib/mhchem'

This is not working properly as I render as following

let tex = data[i].data.trim()
if(tex.indexOf("\\ce{") === -1 )
    washedData.push(katex.renderToString(tex, {displayMode: false}))
else
    washedData.push(katex.renderToString(tex.slice(4, -1), {displayMode: false}))

Pictures of rendered: not using mhchem

I tried to remove \ce, not working.ERORR:

KaTeX parse error: Undefined control sequence: \ce at position 1: \̲c̲e̲{x Na(NH4)HPO4 …

My problem is , how do we import mhchem when using webpack, such as vue which I am using now.

Issue Analytics

State:
Created 4 years ago
Comments:6 (2 by maintainers)

Top GitHub Comments

3reactions

edemainecommented, Jun 6, 2019

Thank you for the complete example! This is very helpful.

Fix: replace import 'katex/dist/contrib/mhchem' with import 'katex/dist/contrib/mhchem.js' in src/components/HelloWorld.vue and everything seems to work.

How I got there: I’ve found something that may be causing the problem: the built app code compiles import katex from 'katex' into

var katex__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! katex */ \"./node_modules/katex/dist/katex.js\");

whereas the built mhchem.js code compiles import katex from "katex" into

var _katex_mjs__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../katex.mjs */ \"./node_modules/katex/dist/katex.mjs\");

Ah, the issue seems to be that import 'katex/dist/contrib/mhchem' ends up including "./node_modules/katex/dist/contrib/mhchem.mjs" instead of .../mhchem.js, which in turn imports katex.mjs instead of katex.js.

I’m not sure whether this suggests any changes on the KaTeX side. I believe we currently don’t expose katex.mjs via package.json, but perhaps now is the time to do so, if Webpack gets confused in this way?

0reactions

doravencommented, Jun 6, 2019

Thank You Very Much !!!

@edemaine

Well, for me, the problem is solved.

If someone happens to go the same way I went through, he can find the solution here.
Update the document, either inside mhchem source code or in mainpage of mhchem would help a lot.

More professional thoughts or changes is far out of my ability.

Thank you again. If there is something I can do for katex, please let me know.