How to load with Typescript + npm package

[andrevalladares]

Hi, obviously a question, not a bug. If this is not the place to ask this, just tell me where to go.

I noticed that vue-mathlive.mjs already comes in the dist folder of the Mathlive npm package.

I don't understand however, how to load them into a Vue Typescript application.

This way doesn't work, no modules are found:

` import * as MathLive from "mathlive/dist/mathlive.min.mjs";
import VueMathfield from "mathlive/dist/vue-mathlive.mjs";

Vue.use(VueMathfield, MathLive); `

Also tried putting the whole path to node_modules. Same result.

I see that there are typescript typings for Mathlive. Should I just use those?

I don't have any other experience of trying to load Javascript modules into a TS project. Is there a way?

[arnog]

Great question. This actually does not depend on Vue (or the Typescript typings). Depending on how your project is configured, this may depend on the bundler you are using to build your application. It could be Parcel, Rollup, Webpack, etc... A bundler will typically have a way of loading a module from the node_modules directory. With some bundlers you can specify "aliases", with others you can use a partial path. If you are using the Typescript compiler as a bundler, you would need to configure it as well (see the moduleResolution option). See also https://www.typescriptlang.org/docs/handbook/module-resolution.html for more info on Typescript module resolution.

[andrevalladares]

Got it working:

• Fixed module resolution with "declare module":

In a typings file (d.ts) or in a global.d.ts file, in the "src" directory:

declare module "mathlive/dist/mathlive";
declare module "mathlive/dist/vue-mathlive";

Importing and using will then work just like the example on the main page. Just dont use a script tag, it's a regular Typescript import. And no need for file extensions either:

import * as MathLive from "mathlive/dist/mathlive";
import VueMathfield from "mathlive/dist/vue-mathlive";

Vue.use(VueMathfield, MathLive);

• Then font directory was breaking from the start of the Vue application. Not sure if this is supposed to happen or not. But that's solvable by copying the fonts from the dist folder to "public/js/fonts".

Seems to be working as expected now. Of course, seeing as there are already typings for MathLive in the npm package, maybe there should be typings for the Wrapper too? Just a humble request, of course. No way I'm the only person that could use this.

@arnog If you don't have any further remarks on this, you may close it. It's working enough for me.

[arnog]

Great to hear you were able to get it working, thanks for the update.
Note also that you can control the location of the fonts directory. See https://cortexjs.io/mathlive/guides/integration/, "Controlling the Location of the fonts Folder".