ReactJS with wowJS not working

Question

I can't seem to get wowJS working.

I do import WOW from 'wowjs';

componentDidMount() {
  const wow = new WOW();
  wow.init();
}

but I get TypeError: _wowjs2.default is not a constructor

If I do import { WOW } from 'wowjs';

I get

MutationObserver is not supported by your browser. WOW.js cannot detect dom mutations, please call .sync() after loading new content.

If I do

componentDidMount() {
  const wow = new WOW();
  wow.sync();
}

Notice the wow.sync()

I get TypeError: Cannot read property 'nodeType' of undefined

Stuck there :(

Answer 1

You should write:

import WOW from 'wowjs';

componentDidMount() {
  const wow = new WOW.WOW();
  wow.init();
}

Notice the WOW before WOW().

Answer 2

The correct way to import WOW.js (after installing with npm) is:

import { WOW } from "wowjs";

const wow = new WOW();
wow.init();

But as you said, the browser gives the error:

MutationObserver is not supported by your browser. WOW.js cannot detect dom mutations, please call .sync() after loading new content.

From what I found online, the sync function is used to reinitialize wow.js when content is replaced after some dynamic changes by JavaScript frameworks. However, as long as your new components calls the init function again after they mount, you shouldn't need the sync call. So simply disable the error with the "live" option provided by WOW.js:

import { WOW } from "wowjs";

// your class declaration extending React.component...
componentDidMount() {
  const wow = new WOW({live: false}); // disables sync requirement
  wow.init()
}

Now there should be no more errors and animations will play on scroll. Relevant GitHub issue here.

BONUS: Not related to the question, but an important issue with WOW.js is that it can mess up your SEO. The library uses visibility: hidden styles to keep your content hidden before it animates in, but bots have issues with that and as a result, your page can have a lower ranking.

An easy way to fix this is to keep WOW.js from initializing if the page hasn't been scrolled. With this, bots can index the content and the user experience isn't affected at all (unless you have WOW elements at the top of your screen, in this case replace them with a delayed CSS animation).

// bonus code that fixes potential SEO issues
import $ from "jquery";
import { WOW } from "wowjs";

// your class declaration extending React.Component...
componentDidMount() {
  const wow = new WOW({live: false}); // disables sync requirement
  var scrolled = false;
  $(window).on('scroll', function() { // jQuery to check for page scroll, you can replace this with an equivalent if you don't like using both jQuery and ReactJS at the same time
    if (!scrolled) {
      scrolled = true;
      wow.init(); // WOW.js initializes only once the page has scrolled
    }
  })
}

Credit to danielgoodwin97 for this simple fix.