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

import React, { useEffect } from 'react';
import WOW from 'wowjs';
import 'wowjs/css/libs/animate.css';
import './App.css';

function App() {
  useEffect(() => {
    const wow = new WOW.WOW({live: false});
    wow.init({
      duration: 1000
    });
    
  }, []);

  return (
    <>
      <div className='mainArea'>
        <div className="wow fadeInUp cardArea">
          Lorem ipsum dolor sit, amet consectetur adipisicing elit.
          Nisi itaque, perferendis facilis repudiandae maxime veritatis totam vero
          laboriosam voluptatibus ipsum sit id quaerat voluptatum, facere pariatur
          dolores consectetur reiciendis impedit alias, deserunt iste debitis amet velit.
          Facere consectetur temporibus esse, magni iure cumque ut dignissimos. Doloribus
          maxime voluptatibus veniam illo vero repellendus expedita alias fugiat impedit,
          praesentium voluptate, molestiae ab. Vero earum excepturi asperiores minima atque
          tempore dolores veritatis numquam quisquam officiis, reiciendis eius eveniet pariatur
          odio temporibus delectus praesentium et cupiditate quaerat rerum animi tenetur? Nisi
          modi reiciendis ipsum provident vitae obcaecati odio minus vel fuga unde veniam deleniti
          quaerat vero tenetur, voluptate incidunt perferendis ut animi ab sit mollitia. Deleniti
          nulla magnam harum ad expedita impedit consequuntur ex libero inventore fuga, distinctio
          nisi, ducimus voluptas! Natus totam expedita, quisquam dicta recusandae ducimus voluptates
          unde asperiores eius rem dolorum cumque eligendi perferendis impedit accusantium! Ducimus
          dolores doloribus in hic doloremque dignissimos. Dolorum at incidunt, veritatis nisi rerum
          vel molestias odit harum ad in labore inventore, illum sapiente sit laborum possimus qui
          debitis dolores tempora ipsam ullam odio! Ducimus itaque hic est explicabo reiciendis
          assumenda soluta maxime quasi labore, aliquid consequuntur eos molestiae ipsum dolorem
          veritatis saepe adipisci placeat. Eum.
        </div>
        <div className="wow bounceInUp cardArea">
          Lorem ipsum dolor sit, amet consectetur adipisicing elit.
          Nisi itaque, perferendis facilis repudiandae maxime veritatis totam vero
          laboriosam voluptatibus ipsum sit id quaerat voluptatum, facere pariatur
          dolores consectetur reiciendis impedit alias, deserunt iste debitis amet velit.
          Facere consectetur temporibus esse, magni iure cumque ut dignissimos. Doloribus
          maxime voluptatibus veniam illo vero repellendus expedita alias fugiat impedit,
          praesentium voluptate, molestiae ab. Vero earum excepturi asperiores minima atque
          tempore dolores veritatis numquam quisquam officiis, reiciendis eius eveniet pariatur
          odio temporibus delectus praesentium et cupiditate quaerat rerum animi tenetur? Nisi
          modi reiciendis ipsum provident vitae obcaecati odio minus vel fuga unde veniam deleniti
          quaerat vero tenetur, voluptate incidunt perferendis ut animi ab sit mollitia. Deleniti
          nulla magnam harum ad expedita impedit consequuntur ex libero inventore fuga, distinctio
          nisi, ducimus voluptas! Natus totam expedita, quisquam dicta recusandae ducimus voluptates
          unde asperiores eius rem dolorum cumque eligendi perferendis impedit accusantium! Ducimus
          dolores doloribus in hic doloremque dignissimos. Dolorum at incidunt, veritatis nisi rerum
          vel molestias odit harum ad in labore inventore, illum sapiente sit laborum possimus qui
          debitis dolores tempora ipsam ullam odio! Ducimus itaque hic est explicabo reiciendis
          assumenda soluta maxime quasi labore, aliquid consequuntur eos molestiae ipsum dolorem
          veritatis saepe adipisci placeat. Eum.
        </div>
      </div>
    </>

  );
}

export default App;

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.

Answer 3

You can import it like this:

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

or if you want to use it anywhere, define it like this:

let WOW;

componentDidMount() {
  WOW = require('wow.js');
  new WOW().init();
}

Answer 4

You should write:

import WOW from 'wowjs';

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

Notice the WOW before WOW().