Lottie-web: Support for server side rendering

[zephinzer]

Currently lacks checks for browser environment, am adding a PR to resolve this issue by checking if window and navigator is available before running factory()

[bodymovin]

Thanks! I'll merge it in the next deploy.

[irenama]

Since this issue is still open I wondered why this statement:
var inBrowser=(typeof navigator !== "undefined");(inBrowser) && ...
didn't make it into master? It seems like this addition is essential for my server-side rendering use-case.

Thank you and keep the good work up :+1:

[bodymovin]

I don't want to pollute the global scope with the "inBrowser" variable.
Is there another solution for this?

[radiovisual]

I am not 100% familiar with the architecture choices of bodymovin, (since I just started looking into the code), but @bodymovin, if you are afraid to pollute the global scope with the inBrowser variable, what about exposing some helper functions on the bodymovin object?

That way we can do:

if (bodymovin.inBrowser()) {
    // you are in the browser
} else {
    // you are outside the browser
}

[irenama]

I don't want to pollute the global scope with the "inBrowser" variable. Is there another solution for this?

@bodymovin I tried a webpack-workaround but unfortunately the server always breaks before anything else because of the navigator variable.

@radiovisual that seems like a terrific idea

[makanti]

Hey guys & @bodymovin , I am dealing with the same sort of issue. Any updates on the above?

[bodymovin]

I added the bodymovin.inBrowser method on version 4.9.0
var window is causing issue with ie 9 and 10 reported here
https://github.com/bodymovin/bodymovin/issues/542
any workaround for this?

[radiovisual]

@irenama, can you show us how the server breaks when you tried your webpack workaround?

@bodymovin, can you show me how you get setup in order to reproduce the error in #542, if you can step-by-step the reproducible steps you take to get to the error, I can take a look to see if I can help find a workaround for this issue and #542.

[brtw]

Has there been any resolution to this? When I reference the npm module 4.10 I get this error.

Here is the error produced:

/files/dev/projects/myapp/node_modules/bodymovin/build/player/bodymovin.js:1
var window=(typeof window === "undefined")?{}:window;(function (root, factory) { if(typeof define === "function" && define.amd) { define( factory); } else if(typeof module === "object" && module.exports) { module.exports = factory(); } else { root.bodymovin = factory(); } }(window, function() {var svgNS = "http://www.w3.org/2000/svg";
                                                                                                                                                                                                                               ^
ReferenceError: navigator is not defined
    at /files/dev/projects/myapp/node_modules/bodymovin/build/player/bodymovin.js:4:54
    at svgNS (/files/dev/projects/myapp/node_modules/bodymovin/build/player/bodymovin.js:1:224)
    at Object.<anonymous> (/files/dev/projects/myapp/node_modules/bodymovin/build/player/bodymovin.js:1:275)
    at Module._compile (module.js:571:32)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/files/dev/projects/myapp/compiled/webpack:/external "bodymovin":1:1)
    at __webpack_require__ (/files/dev/projects/myapp/compiled/webpack:/webpack/bootstrap 42a05b87b0cf71d9439e:19:1)
    at Object.module.exports.Object.defineProperty.value (/files/dev/projects/myapp/compiled/webpack:/components/BoxPoppinAnimation.jsx:4:1)
    at __webpack_require__ (/files/dev/projects/myapp/compiled/webpack:/webpack/bootstrap 42a05b87b0cf71d9439e:19:1)
    at Object.module.exports.Object.defineProperty.value (/files/dev/projects/myapp/compiled/webpack:/containers/PilotLandingPage.jsx:9:1)
    at __webpack_require__ (/files/dev/projects/myapp/compiled/webpack:/webpack/bootstrap 42a05b87b0cf71d9439e:19:1)
[nodemon] app crashed - waiting for file changes before starting...

And the file where bodymovin is referenced.

import React, { Component } from 'react';
import Waypoint from 'react-waypoint';
// This is a makeshiff js file since the npm library doesnt have the latest updates as of 7/25/17
import * as bodymovin from 'bodymovin';
// import * as bodymovin from 'lib/bodymovin.js';
import * as animationData from './BoxPoppinAnimation.json';

/**
 * Class for box poppin animation. Implements bodymovin
 * for Adobe after Effects Lottie put out by Airbnb
 *
 * @class      BoxPoppinAnimation (name)
 */
class BoxPoppinAnimation extends Component {

  constructor() {
    super();
    this.animationIsAttached = false;
    this.attachAnimation = this.attachAnimation.bind(this);
  }

  componentDidMount() {
      this.attachAnimation();
  }

  /**
   * Attach the animation to the div with ref animationDiv
   * uses the animation properties provided in the menthod
   * animationData is imported above
   */
  attachAnimation() {
    if (this.animationContainer !== undefined && !this.animationIsAttached) {
      /**
       * These animation properties are proprietary to bodymovin
       *
       * @type       Object
       */
      const animationProperties = {
        container: this.animationContainer,
        renderer: 'svg',
        loop: false,
        autoplay: false,
        animationData
      };

      this.anim = bodymovin.loadAnimation(animationProperties);
    }
  }

  /**
   * Waypoint triggers the methods on scroll
   * ref is required to bind to the correct container
   */
  render() {
    return (
      <div>
        { /* <Waypoint onLeave={() => { this.anim.destroy(); this.attachAnimation(); }} /> */ }
        <div ref={(animationDiv) => { this.animationContainer = animationDiv; }} />
        <Waypoint onEnter={() => this.anim.play()} />
      </div>
    );
  }
}

export default BoxPoppinAnimation;

You will notice that I have commented out an import to a modified bodymovin js file which adds var inBrowser=(typeof navigator !== "undefined");(inBrowser) to bodymovin v4.9. That is the edited file I use as a work around.

FYI I am using the boilerplate reactGo/reactGo

[irenama]

@radiovisual I noticed when I was working on a webpack fix, that the build really breaks before I can even create a point where I can "mock" the navigator variable i.e. for the server-side where it's not known and should be ignored..

My Error is the one also @brtw got.

.../node_modules/bodymovin/build/player/bodymovin_light.min.js:1
(function (exports, require, module, __filename, __dirname) { var window="undefined"==typeof window?{}:window;!function(t,e){"function"==typeof define&&define.amd?define(e):"object"==typeof module&&module.exports?module.exports=e():t.bodymovin=e()}(window,function(){function t(){return{}}function e(t){yt=t?Math.round:function(t){return t}}function s(t){return Math.round(1e4*t)/1e4}function i(t){t.style.userSelect="none",t.style.MozUserSelect="none",t.style.webkitUserSelect="none",t.style.oUserSelect="none"}function a(t,e,s,i){this.type=t,this.currentTime=e,this.totalTime=s,this.direction=0>i?-1:1}function r(t,e){this.type=t,this.direction=0>e?-1:1}function n(t,e,s,i){this.type=t,this.currentLoop=e,this.totalLoops=s,this.direction=0>i?-1:1}function h(t,e,s){this.type=t,this.firstFrame=e,this.totalFrames=s}function o(t,e){this.type=t,this.target=e}function p(t,e){return this._cbs[t]||(this._cbs[t]=[]),this._cbs[t].

ReferenceError: navigator is not defined
    at /home/irena/Documents/Peerigon/www/node_modules/bodymovin/build/player/bodymovin_light.min.js:1:22913
    at yt (/home/irena/Documents/Peerigon/www/node_modules/bodymovin/build/player/bodymovin_light.min.js:1:167)
    at Object.<anonymous> (/home/irena/Documents/Peerigon/www/node_modules/bodymovin/build/player/bodymovin_light.min.js:1:187)
    at Module._compile (module.js:570:32)
    at Module._extensions..js (module.js:579:10)
    at Object.require.extensions.(anonymous function) [as .js] (/home/irena/Documents/Peerigon/www/node_modules/babel-register/lib/node.js:152:7)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)

npm ERR! Linux 4.8.0-56-generic
npm ERR! argv "/home/irena/.nvm/versions/node/v6.9.5/bin/node" "/home/irena/.nvm/versions/node/v6.9.5/bin/npm" "run" "dev"
npm ERR! node v6.9.5
npm ERR! npm  v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! [email protected] dev: `NODE_ENV=development node ./bin/www`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] dev script 'NODE_ENV=development node ./bin/www'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the www package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     NODE_ENV=development node ./bin/www
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs www
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls www
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /home/irena/Documents/Peerigon/www/npm-debug.log

I'm also using a wrapper module react-bodymovin

[tony99nyr]

We are also running into the navigator is not defined error. Would really appreciate a check for its existence before looking at userAgent.

var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);

[maziarz]

Is there a workaround for this issue? I am using vuejs, more specifically nuxt. The workaround seems to be implemented for the react version.

[dardub]

Rather than adding inBrowser to the global scope, you can just inline inBrowser expression.

(typeof navigator !== "undefined") && (function(root, factory) {
....

It solved the problem for me. I can do a PR but I think the IE fix PR should be merged first.

[serzz1990]

I solved the problem for SSR
see my fork component vue-lottie for vueJS

[NicolaSansom]

@dardub Would you still be able to create a PR? This solved the issue for me also. Looks like the IE PR has been merged now.

[dardub]

@NicolaSansom Sure. I haven't looked at this in a while so I thought maybe it had been fixed.

[lares83]

any update about merging PR #905 ???

[alx-andru]

Is the PR itself being considered or is a different solution being discussed?

[bryandowning]

I believe this issue can be closed, as #905 was merged. I can confirm that SSR is working for me with [email protected]

cc @bodymovin

[bodymovin]

Yes, closing for now.
Thanks.