search

airbnb / lottie-web

Render After Effects animations natively on Web, Android and iOS, and React Native. http://airbnb.io/lottie/
MIT License
30.64k stars 2.88k forks source link

TypeError: t.pow is not a function (bodymovin_light.min.js) #1112

Open walleva opened 6 years ago

walleva commented 6 years ago

Hi there,

Our team is using bodymovin for spinner animation. Then we got an exception: Uncaught TypeError: t.pow is not a function

Here is the callstack: at pow (webpack:///node_modules/bodymovin/build/player/bodymovin_light.min.js:1:30641 at t (webpack:///node_modules/bodymovin/build/player/bodymovin_light.min.js:1:30718 at e (webpack:///node_modules/bodymovin/build/player/bodymovin_light.min.js:1:71 at call (webpack:///node_modules/bodymovin/build/player/bodymovin_light.min.js:1:83 at window (webpack:///node_modules/bodymovin/build/player/bodymovin_light.min.js:1:162 at extendStatics (webpack:///node_modules/tslib/tslib.es6.js:22:0 at null (webpack:///webpack:/src/components/bodymovinSpinnerData.tsx:3:441 at dispatch (webpack:///webpack:/src/app.tsx:17:1 at render (webpack:///webpack:/src/components/BodymovinSpinner.tsx:38:8 at ty (webpack:///webpack:/src/components/bodymovinSpinnerData.tsx:3:386

We are using bodymovin by:

*import as bodyMovinPlayer from 'bodymovin/build/player/bodymovin_light.min';**

In package.json, the bodymovin version is: "dependencies": { "bodymovin": "^4.13.0",

If look into bodymovin_light.js and bodymovin_light.min.js, this issue seems from: math.pow (Not Math.pow).

image

Any idea about the root cause? Thanks!

bodymovin commented 6 years ago

Hi, can you share the animation? Also, can you try it with a newer version of the player?

TheSisb commented 6 years ago

I have a similar issue on the latest version of lottie-web. It's affecting users on Chrome 68 Win7/10 and IE Edge. Looking at the built code, I'm unsure how such an error is possible because that math variable is from BMMath which is a copy of Math via this code:

(function(){
    var propertyNames = Object.getOwnPropertyNames(Math);
    var i, len = propertyNames.length;
    for(i=0;i<len;i+=1){
        BMMath[propertyNames[i]] = Math[propertyNames[i]];
    }
}());

However you do do BMMath.random = Math.random; a couple lines later and I was curious why you did that.

Also there seems to be duplicate functionality as the built code already has the following variables

var bm_pow = Math.pow;
var bm_sqrt = Math.sqrt;
var bm_abs = Math.abs;
var bm_floor = Math.floor;
var bm_max = Math.max;
var bm_min = Math.min;
bodymovin commented 6 years ago

Hi, originally the random function was seeded, so the Math.random function was replaced by a custom function. But performance wasn't good so for now I replaced it with the original. I can remove that line, but it's temporary until I find a better random seeded function. the BMMath set of methods are only available for After Effects expressions, that have a different behavior than regular javascript. For example the Math.abs function is replaced by a custom one.

The other set of methods (bm_pow, bm_sqrt) are used for the rest of the code, and it's aimed at reducing the closure tree lookup to find those methods.

If you're having issues with any of these, could you share a link or an animation to take a look at?

intb9 commented 6 years ago

I'm having the same issue on the latest version of lottie-web (happened on Chrome 70 and IE Edge). Is this going to be fixed?

bodymovin commented 6 years ago

@idoNitzan hi, can you share a link to the issue?

intb9 commented 6 years ago

@bodymovin the issue is the exception TypeError: t.pow is not a function we get when rendering the animation. I can send you our animation json in private it that's what you meant

bodymovin commented 6 years ago

@idoNitzan sure, you can send the animation, but this looks more like a build problem than an animation problem.
If you can share a link to reproduce the issue, it will probably be easier. What tool are you using to build your js code?

benpetty commented 6 years ago

We are getting the same error, haven't been able to repro myself yet but is getting reported from users with these user agent properties (for example):

  "userAgent": "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36",
  "userAgentInfo": {
    "browserName": "Chrome",
    "browserVersion": "61.0.3163.100",
    "engineName": "AppleWebKit",
    "engineVersion": "537.36",
    "isBot": false,
    "isMobile": false,
    "os": "Linux x86_64",
    "platform": "X11"
  },

 "userAgent": "Mozilla/5.0 (iPhone; CPU iPhone OS 12_0_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0 Mobile/15E148 Safari/604.1",
  "userAgentInfo": {
    "browserName": "Safari",
    "browserVersion": "12.0",
    "engineName": "AppleWebKit",
    "engineVersion": "605.1.15",
    "isBot": false,
    "isMobile": true,
    "os": "CPU iPhone OS 12_0_1 like Mac OS X",
    "platform": "iPhone"
  },

The error fires at startdenom = math.pow (line 764 in lottie.js)

(function (pool, math) {
//
// The following constants are related to IEEE 754 limits.
//
    var global = this,
        width = 256,        // each RC4 output is 0 <= x < 256
        chunks = 6,         // at least six RC4 outputs for each double
        digits = 52,        // there are 52 significant digits in a double
        rngname = 'random', // rngname: name for Math.random and Math.seedrandom
        startdenom = math.pow(width, chunks),
        significance = math.pow(2, digits),
        overflow = significance * 2,
        mask = width - 1,
        nodecrypto;         // node.js crypto module, initialized at the bottom.

TypeError: u.pow is not a function

Building with webpack 4 and babel7, with babel-preset-env and browserslist query of 

  "browserslist": [
    "cover 95% in US",
    "not dead",
    "not ie > 0",
    "not ie_mob > 0",
    "not android < 4.2",
    "unreleased versions",
    "firefox ESR"
  ]

hopefully this helps to track the bug down.

bodymovin commented 6 years ago

@benpetty do you have a link where I can see the error triggering? also, if you can share the animation, it'd be great.

benpetty commented 6 years ago

@bodymovin Thanks, it's live at https://app.tomorrow.me/ I'm not sure which animation is triggering the error, (there are multiple animations on the page) sometimes happens on routes where there are no animations rendered.

benpetty commented 6 years ago

@bodymovin Sample user agent strings that trigger the error:

sample animation json https://app.tomorrow.me/static/animations/lottie/Will.0adf93eeafda.json

bodymovin commented 6 years ago

Hi, I'm checking the code and I can't figure out why it is not finding that Math method. Do you know if this sample is out of a large number of visitors or us it happening frequently?

maxired commented 5 years ago

Hey here. I also noticed the same error on a newly released website. After some investigation, this issue appeared only on request coming with IPs belonging to Facebook.

Probably they have a bot whose Object.getOwnPropertyNames(Math); call does not returns pow.

nanditbansal commented 3 years ago

Hi. Can anyone please confirm how this issue got resolved?