NPM Package does not work.

[l-rojas]

I was trying to install Mathquill as an NPM dependency, and, talking with Andrew Hyndman (@ajhyndman) on the Slack channel, he realized that the main script is not defined in package.js, which might be the issue.

[laughinghan]

I didn't see you guys chatting about it, where was that?

I assume by "does not work" you mean that you aren't able to require('mathquill') with Browserify or Webpack (if not, can you clarify?). Adding a "main" to package.json isn't enough, we'd also need to package it with CommonJS for you to be able to require() it.

My current plan is to switch to Rollup and have it output mathquill.common.js, mathquill.amd.js etc, because I think UMD is awful and brittle and unnecessary; but I'd be interested in hearing opinions on UMD.

[laughinghan]

Someone came into Slack today to chat about this, and managed to use MathQuill with browserify-shim using the following config:

  "browserify-shim": {
    "mathquill": {
      "depends": ["./node_modules/jquery/dist/jquery.js:jQuery"],
      "exports": "MathQuill"
    }
  },

https://mathquill.slack.com/archives/mathquill/p1467223762000717

If you're using Browserify, let me know if that works for you

[rkotcher]

I was the one who was on slack earlier 😄 Let me know if I can be of help!

[isubasti]

@rkotcher I have never use browserify-shim before. Is there any other thing that I should do other than adding that config to package.json?

[jgable]

I have a fork that I publish to npm with built files (good for webpack or browserify) https://github.com/FB-PLP/mathquill. It is published as node-mathquill and it mostly follows the versioning from this repo.

[viktorstrate]

If you are using webpack, you can use loaders to import mathquill, like @laughinghan explains, but with webpack instead.

Install the following loaders:

$ npm install --save-dev exports-loader imports-loader

Then you can import mathquill like this:

const MathQuill = require('exports-loader?window.MathQuill!imports-loader?window.jQuery=jquery!mathquill/build/mathquill.js')
const MQ = MathQuill.getInterface(2)

[gselvamary]

If you are using webpack, you can use loaders to import mathquill, like @laughinghan explains, but with webpack instead.

Install the following loaders:

$ npm install --save-dev exports-loader imports-loader

Still not working

[gselvamary]

Can anyone give me a link to take components to add equation in the text field

[gselvamary]

I am not using web pack .. can you guide

[viktorstrate]

@gselvamary I have made a React wrapper, which uses Webpack, take a look at how it's implemented react-mathquill.

[gselvamary]

@viktorstrate Hi... You did a great job.. I am working with your wrapper only.... I have the problem in this line
export const MathQuill = require('exports-loader?window.MathQuill!imports-loader?window.jQuery=jquery!mathquill/build/mathquill.js')

[gselvamary]

@viktorstrate I am not using web pack and yarn

[viktorstrate]

This method only works with Webpack, you need to use webpack to import it this way.
If not, why don't you use the traditional way of importing, as described here Gettings started - Mathquill docs.

If you have further questions please write to me at viktorstrate@gmail.com, to keep this thread focused on the original issue. 😉

[AlienKevin]

A more complete reference of viktorstrate's Webpack installation guide that includes required CSS file:

import { getInterface } from 'exports-loader?window.MathQuill!imports-loader?window.jQuery=jquery!mathquill/build/mathquill.js';
import "mathquill/build/mathquill.css";
const MQ = getInterface(2);
// start using mathquill
const mathField = MQ.MathField(document.getElementById("mathField"));

Remember to install exports and imports loader:

npm install --save-dev exports-loader imports-loader