React-MathQuill CDN Not Working

[ebryski]

Hi. I’m attempting to use the react-mathquill library using CDN. I’m copying the script tags into my file after script tags for MathQuill and React, but on running I get the errors:

Uncaught ReferenceError: process is not defined
Uncaught ReferenceError: module is not defined

Does anyone know how to resolve this issue? I would prefer using CDN (which I’ve been using for importing all my libraries so far) as opposed to setting up NPM.

[DanCouper]

That won’t work. I think the script you’re looking at hasn’t been built with this in mind.

process is a Node module, the reason this is falling over is in the code somewhere is something like if (process.env.NODE_ENV === "dev") // do some dev stuff which hasn’t been stripped out when the maintainer built and deployed the library in the form of a module to be used the way you’re trying to.

If you can find out via the errors exactly what it is failing on, you can sort of squash them by putting something like (sorry, not sure if this is exactly right):

<script>
window.process = {
  env: {
    NODE_ENV: "dev",
  },
};
</script>

Before your other scripts. However, if the code actually uses the modules for anything more than checking string values (eg it runs functions from them), you’ll be out of luck

[ebryski]

I’m trying to use NPM to import react-mathquill now. I’m using the freeCodeCamp tutorial. It uses NPM to import packages and bundles it with Browserify. It works when I import “moment”, as they do in the video, but not for other packages.

I think I need to import the dependencies (React, JSX, MathQuill) before importing react-mathquill.

The NPM MathQuill page gives the following code:

<link rel="stylesheet" href="/path/to/mathquill.css"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="/path/to/mathquill.js"></script>
 
<p>
  Solve <span id="problem">ax^2 + bx + c = 0</span>:
  <span id="answer">x=</span>
</p>
 
<script>
  var MQ = MathQuill.getInterface(2);
  MQ.StaticMath($('#problem')[0]);
  var answer = MQ.MathField($('#answer')[0], {
    handlers: {
      edit: function() {
        checkAnswer(answer.latex());
      }
    }
  });
</script> 

Adding the first lines returns errors, as it’s unable to find the files. Without them, there’s no error, but MathQuill doesn’t change the text.

I also get issues with React. I added the following sample code:

ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('root')
  );

When adding the code to my file and attempting to bundle it with Browserify, I get an unexpected token error (this was after also importing JSX).

I also had a minor issue with the tutorial. At the timestamp in the link, it goes over creating a bundle from javascript file with the command prompt. I wouldn’t want to run this command each time I change my code though. The person does mention a way of automating it, but I couldn’t find anything on how to do that.

I’m guessing there’s something simple that I’m just not doing, but I can’t figure out what it is.