Mathjs: "Cannot set property 'math' of undefined" attempting to load math.js

Created on 17 Sep 2018 · 9Comments · Source: josdejong/mathjs

When I attempt to load math.js inside a module of a module, I am getting what appears to be a Webpack error. Latest math.js, Chrome Version 69.0.3497.92 (Official Build) (64-bit)

Here is the error:

math.js:36 Uncaught TypeError: Cannot set property 'math' of undefined
    at webpackUniversalModuleDefinition (math.js:36)
    at math.js:37
webpackUniversalModuleDefinition @ math.js:36
(anonymous) @ math.js:37

In my index.html:

[...]

   <script type="module">
      import "./jquery-3.3.1.min.js";
      import { setupTable, calculateMeasurements } from "./renderer.js";
      $(document).ready(setupTable);
    </script>

[...]

Then, in renderer.js:

import './jquery-3.3.1.min.js';
import { WidthMeasurer, MeasurerUtil } from './measurer.js';

function cls() {
  $("#debug").empty();
}

[...]

... then, in measurer.js:

import * as math from './math.js';

class MeasurerError extends Error {}
class MeasurementOutOfBoundsError extends MeasurerError {}

export class MeasurerUtil {
[...]

Is webpack doing something strange, or am I doing something strange?

bug help wanted

Source

postmaxin

👍1

Most helpful comment

@Quoteme thanks for reporting.

The entry point for ES Modules is main/esm/index.js. The module field in package.json is pointing to this file, and bundlers like Webpack pick this up automatically. This entry point though will load hundreds of files though, since it's the unbundled source files, and I don't think unpkg.com likes that.

It would be nice if there is a way to make the bundle also work with import, maybe there is a way to actually get the bundled version working too.

EDIT: one more reason I see that the current es files do not work straight in the browser is because they rely on node.js module resolver: the file names do not end with .js.

josdejong on 26 Oct 2019

👍2

All 9 comments

Shouldn't

import * as math from './math.js';

import * as math from 'mathjs';

josdejong on 17 Sep 2018

I have math.js in the same directory as my code. Trying to do it your way results in:

Uncaught TypeError: Failed to resolve module specifier "mathjs". Relative references must start with either "/", "./", or "../".

postmaxin on 17 Sep 2018

Ah, so you use the bundled version. Maybe Webpack has issues bundling a bundled version or something? I don't really have a clue. Can you try to reproduce this issue in a minimal example?

josdejong on 17 Sep 2018

Done:

<html>
  <head>
    <script type="module">
      import * as math from './math.js';
    </script>
  </head>
  <body>
    This will fail.
  </body>
</html>

Stick that and math.js in a directory. Serve that directory on the web (I used php -Slocalhost:4444 in the directory). Navigate there in Chrome. Open JavaScript console. See this error:

Uncaught TypeError: Cannot set property 'math' of undefined
    at webpackUniversalModuleDefinition (math.js:36)
    at math.js:37

postmaxin on 17 Sep 2018

Thanks I can replicate this issue when loading straight into the browser.

I also tried loading in node.js from a module file, that works fine:

// test.mjs
// run via:
//     node --experimental-modules test.mjs
import math from './dist/math.js'

console.log('Result: ' + math.sqrt(-4)) // Result: 2i

It would be great if someone can look into how to compile a Webpack for mathjs bundle such that it can be consumed from a module file.

josdejong on 18 Sep 2018

I get the same error, but I'm just trying to load the mathjs module through CDNJS. I've tried two ways:

import * as math from 'https://cdnjs.cloudflare.com/ajax/libs/mathjs/5.4.1/math.js';

and

import math from 'https://cdnjs.cloudflare.com/ajax/libs/mathjs/5.4.1/math.js';

Would be great if this could be made possible, even if it means adding another dist file entierly to the CDN.

Demonstrandum on 19 Jan 2019

I expect this issue to be resolved in [email protected], which has ES6 modules. Will close this issue now. If there are still issues please open a new topic.

josdejong on 21 Aug 2019

The error still has not been fixed:

import math from 'https://unpkg.com/[email protected]/dist/math.js';

results in:

Uncaught SyntaxError: The requested module 'https://unpkg.com/[email protected]/dist/math.js' does not provide an export named 'default'

and

import * as math from 'https://unpkg.com/[email protected]/dist/math.js';

results in:

Uncaught TypeError: Cannot set property 'math' of undefined
    at webpackUniversalModuleDefinition (math.js:36)
    at math.js:37

Quoteme on 24 Oct 2019

@Quoteme thanks for reporting.

It would be nice if there is a way to make the bundle also work with import, maybe there is a way to actually get the bundled version working too.

EDIT: one more reason I see that the current es files do not work straight in the browser is because they rely on node.js module resolver: the file names do not end with .js.

josdejong on 26 Oct 2019

👍2

Was this page helpful?

0 / 5 - 0 ratings