Unable to use math.js on frontend with webpack

[chmln]

Hello!

First off, koodos to author for a fantastic library.

I'm having trouble importing mathjs to frontend through webpack.

Whenever I import mathjs, here's what happens:

The module is imported like any other node module.

And here's my webpack config

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: ['./src/main.js'],
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/',
    filename: 'build.js'
  },
  resolveLoader: {
    root: path.join(__dirname, 'node_modules'),
  },
  module: {
    loaders: [

        { test: /\.jade$/, loader: "jade" },

        { 
            test: /\.js$/, 
            loader: 'babel', 
            include: [                
                path.resolve(__dirname, "src")
              ] 
        },

        { test: /\.json$/, loader: 'json' },

        { test: /\.vue$/, loader: 'vue' },

        { test: /\.scss$/, loaders: ["style", "css", "sass"], exclude: /node_modules/ },

        { 
            test: /\.styl$/,
            loaders: ["style", "css", "stylus"],
            exclude: /node_modules/

        },

        {
            test: /\.(png|jpg|gif|svg)$/,
            loader: 'url',
            query: {
            limit: 10000,
            name: '[name].[ext]?[hash]'
        }

      }
    ]
  },

  devtool: 'eval-source-map'
}

module.exports.devtool = 'source-map'
// http://vuejs.github.io/vue-loader/workflow/production.html

module.exports.plugins = (module.exports.plugins || []).concat([

    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),

    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    }),

    new webpack.optimize.OccurenceOrderPlugin()

])

No problems, however, using mathjs in node backend.

[josdejong]

Thanks.

It's hard to guess what's going wrong here and where (babel? uglify? webpack?). math.js itself is built using WebPack and Uglify too. The code is regular ES5, so no babel needed. To see whether it's caused somehow by Babel you could maybe configure Babe not ignore all math.js code?

[chmln]

I've tried tweaking babel, disabling uglify and source maps, but I couldn't get the node module import to work in any case.

However, including the math.min.js file instead works perfectly fine.

Suspecting it is rather an issue with uglify and/or webpack than the library itself.
In case I find a culprit I'll report back here for sure.

[josdejong]

Hm, that's not really satisfactory. Great that you found a solution but I'm still curious what's causing this - others may encounter similar issues.

[medja]

I stumbled upon this as well and after quite a bit of digging I think I found the root of the problem.
The error is caused by typed-function when a it tries to use a signature function's name as the typed function's name.

In my case the bug was actually caused by Chrome (51.0.2693.2 dev-m) when trying to create the middle helper function inside lib/function/statistics/median.js:

var middle = typed({
  'number | BigNumber | Unit': function (value) {
    return value;
  }
});

Because the function is anonymous and bound to an object, Chrome decided to use it's object key for the function name, which works fine when setting it as a property on the function but causes issues when typed-function tries to use it to evaluate a new function.

var factory = (new Function(refs.name, 'createError', body));
var fn = factory(refs, createError);

This problem can be avoided by explicitly naming anonymous functions but that's really nothing more then a workaround at this point, since the problem lies in another package.

typed-functions will probably need a patch to handle cases where a browser, a transpiler or a minifier use invalid function names. I guess I could make a PR and propose a fix.

In the meanwhile one solution is to run a script that adds proper names to those functions. Babel with the ES2015 preset does that, but minifying will undo the process.

[josdejong]

Wow, you're right, Chrome 51 actually changes the name of an anonymous function to its object key.

It's indeed not safe to rely on the name property of functions, since names can change when minifying code, or like Chrome 51 does for unnamed functions in objects. I've changed typed-function such that it only uses the name property of other typed-functions, not of regular JavaScript functions. That should solve the issue. I've updated in the develop branch, it would be great if you could give it a try (don't forget to run npm update).

[medja]

It worked perfectly. I made sure the published version still threw the exception first, just in case the latest Chrome (dev) update changed anything. And after switching to the develop branch everything seems to work as expected. Hopefully this also fixes any similar issues. Good job 👍

[josdejong]

great to hear, thanks for the quick feedback.

[richburdon]

Hey @josdejong any update on this? Does the dev branch work? I still have the same error. Thanks.

[josdejong]

As far as I know this issue was fixed in v3.2.0. Apparently not? How to reproduce your issue?

[chmln]

@josdejong can confirm working since v3.2 w/ webpack
@richburdon try reinstalling? webpack config might also help investigate the issue