1

I'm using webpack in my project, where I'm importing mathjs. When I try to run the generated bundle (or rather, include it in HTML), I get an unexpected token error.

Here's the lines generated by webpack where the unexpected token is:

try {
  for (_iterator.s(); !(_step = _iterator.n()).done;) {
    var _λ = _step.value;

    var _i4 = indexOf(uniqueValues, _λ, equal);

    if (_i4 === -1) {
      uniqueValues.push(_λ);
      multiplicities.push(1);
    } else {
      multiplicities[_i4] += 1;
    }
  } // find eigenvectors by solving U − λE = 0
  // TODO replace with an iterative eigenvector algorithm
  // (this one might fail for imprecise eigenvalues)

} catch (err) {
  _iterator.e(err);
} finally {
  _iterator.f();
}

Notice the _λ variable. Here's the mathjs code that generates it:

for (var λ of values) {
  var i = indexOf(uniqueValues, λ, equal);

  if (i === -1) {
    uniqueValues.push(λ);
    multiplicities.push(1);
  } else {
    multiplicities[i] += 1;
  }
} // find eigenvectors by solving U − λE = 0
// TODO replace with an iterative eigenvector algorithm
// (this one might fail for imprecise eigenvalues)

which means that the variable was originally named λ. Now, while it was new to me that JS supported non-ASCII characters, it clearly must have given how widely used this library is. Even more peculiarly, mathjs has worked for me previously already. I'm honestly not sure what changed, but when I run webpack now, I get this apparently unreadable output.

Perhaps it's noteworthy to say that I'm also using TypeScript. I do have another issue with mathjs which is that webpack just generates an absolutely massive bundle file, but that should be reserved for a different thread.

My configuration files look as follows:

webpack.config.js

const path = require('path');
module.exports = {
    entry: './src/view/index.ts',
    mode: 'development',
    devtool: 'inline-source-map', // For some reason no other option works well. Might be related.
    module: {
      rules: [
        {
          test: /\.(t|j)sx?$/,
          use: 'ts-loader',
          exclude: /node_modules/,
        },
      ],
    },
    resolve: {
      extensions: ['.tsx', '.ts', '.js'],
    },
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist'),
    }
  };

tsconfig.json

{
"compilerOptions": {
  "module": "commonjs",
  "noImplicitAny": true,
  "removeComments": true,
  "preserveConstEnums": true,
  "outDir": "./dist/",
  "rootDirs": [
    "./src/"
  ],
  "sourceMap": true,
  "strict": true,
  "target": "ES2020" //Used to be ES2016, I changed to 20 to test if it resolved the issue. It didn't.
},
"include": ["src/**/*.ts"],
"exclude": ["node_modules", "**/*.spec.ts"]
}

package.json

{
  ...    
  "scripts": {
    ...,
    "build": "webpack"
  },
  "devDependencies": {
    ...
    "@types/node": "^15.12.4",
    "ts-loader": "^9.2.3",
    "ts-node": "^10.1.0",
    "typescript": "^4.3.5",
    "webpack": "^5.44.0",
    "webpack-cli": "^4.7.2"
  },
  "dependencies": {
    ...
    "mathjs": "^9.4.3"
  }
}

Edit: Simplest reproducible example I could make, with the 3 configuration files the same as above. Let the entry point specified above, src/view/index.ts, be as follows:

import * as m from 'mathjs';
m.parse("A=B*C").compile();

The error is still the same, although if I actually open bundle.js it does display the lambda-character, so I guess it's just in the chrome console that it isn't displayed properly.

So, for some reason, ANY importing/including of mathjs causes this error. Mind you, I deleted node_modules and reinstalled again. The weirdest part about this is, again, that it used to work just a couple hours ago?!

Fly
  • 810
  • 2
  • 9
  • 28
  • 2
    Are you sure this has anything to do with mathjs? Did you try to reduce your code to [mcve] form to see _exactly_ when it stops happening, the more you take away (and I'd start by literally throwing away _all_ the code except for a single line involving lambda, like `const λ = true;`)? It looks like your editor is not loading the file as UTF-8 (which turns what should be unicode into things like `−`) – Mike 'Pomax' Kamermans Jul 13 '21 at 22:06
  • @Mike'Pomax'Kamermans The variable is also present in the code, not just in the comment (see line 3 in my snippet). While the case could certainly be made that my editor loads them wrong, the thing is... I've never touched that file, at least not until I was trying to figure out where the error came from. I'll try making a reproducible example after I try a few other things, but generally speaking I'm quite stumped, I have no idea what the issue could be – Fly Jul 13 '21 at 22:09
  • 2
    reducing usually helps you get a better understanding of what the issue could be. Given that you're working in typescript, one place to look is "does your typescript converter even understand this fairly unusual thing you're doing?", e.g. https://www.typescriptlang.org/docs/handbook/release-notes/overview.html#better-unicode-support-for-identifiers says you need at least 3.6, which is the case for you: see if just running TS to JS conversion, on its own without webpack etc. already mangles your input. – Mike 'Pomax' Kamermans Jul 13 '21 at 22:12
  • @Mike'Pomax'Kamermans I did try testing TS alone (Using "tsc" and then just linking a js file different from the bundle), but had a different problem - Apparently, CommonJS modules are not allowed in browsers, so I had no choice but to try bundling it. The weird thing is that I swear everything worked fine 3h ago and I dont feel like I really changed anything besides running it again... Ill work on the example now, but itll take a bit since Ill have to setup the project from scratch – Fly Jul 13 '21 at 22:15
  • 1
    Then I hope you use revision control, check what changed wrt the commit prior to when things went wrong? As for commonjs in the browser: no, browsers only support "real" JS, which means flat files or es modules. Commonjs was a Node invention back when JS had no official module solution as part of the spec. (at least Node now also natively supports es modules, so if you have that option, writing modern JS is going to get you the biggest compatibility) – Mike 'Pomax' Kamermans Jul 13 '21 at 22:33
  • @Mike'Pomax'Kamermans So I just deleted literally all of my own code apart from a one liner using the mathjs library, and the error is still persisting (See edit above). So the issue probably HAS to lie in my 3 configuration files, however they look very vanilla to me, so I'm not even sure what I could change/reduce to try to get rid of the error – Fly Jul 13 '21 at 22:37
  • 2
    @Mike'Pomax'Kamermans Nevermind, I found the issue. My literally-near-empty index.html file that was loading the bundle was not set to UTF-8. So the JS it loaded afterwards also got read wrong, ugh. So I guess you were spot-on with your initial comment, just that instead of the editor being at fault it was my html file (Literally the ONE file I didn't look at because I thought "Surely it's a JS problem") and consequently my browser – Fly Jul 13 '21 at 22:54
  • 1
    classic, we've all been there. I'll vote to close this (if you don't delete it before then =D) but good to know you found it. – Mike 'Pomax' Kamermans Jul 14 '21 at 03:05
  • @Fly can you kindly post your solution to this? I'm facing similar issues transpiling for a web extension. – rob May 12 '22 at 17:46
  • 1
    @rob I don't quite remember this project of mine, but I'd infer from my previous comment that I added something along the lines of `` to my index.html file – Fly May 18 '22 at 23:06
  • @fly thanks, I deduced the same. It may be worth having it as the accepted answer for more visibility – rob May 20 '22 at 05:46

0 Answers0