wowjs, gatsby - ReferenceError: WOW is not defined

I am trying to use wowjs in gatsby. Tried solution given here: Wow.js with webpack and react

gatsby develop compiles successfully but on a page where I've a js file with functions that uses jquery and wowjs throws an error "ReferenceError: WOW is not defined".

layout.js

import "jquery"
import "popper.js"
import "bootstrap"
import "bootstrap-select"
import WOW from "wowjs/dist/wow.js"
import "jquery.scroll-parallax"
import 'owl.carousel'
import "./vendors/main.js" // tried to put this in /static as well

gatsby-node.js

const webpack = require('webpack');

exports.onCreateWebpackConfig = ({
    stage,
    rules,
    loaders,
    plugins,
    actions,
  }) => {
    actions.setWebpackConfig({
        module: {
            rules: [
                {
                    test: require.resolve('wowjs/dist/wow.js'), 
                    loader: 'exports-loader?this.WOW'
                },
            ],
        },
        plugins: [
            new webpack.ProvidePlugin({
                $: 'jquery',
                jQuery: 'jquery',
                'window.jQuery': 'jquery'
            }),
        ],
    })
  }

main.js

;(function($){
    "use strict";

    /*--------- WOW js-----------*/
    function wowAnimation(){
        new WOW({
            offset: 100,          
            mobile: true
        }).init()
    }
    wowAnimation()

    var $animation_elements = $('.scroll_animation');
    var $window = $(window);

    function check_if_in_view() {
      var window_height = $window.height();
      var window_top_position = $window.scrollTop();
      var window_bottom_position = (window_top_position + window_height);

      $.each($animation_elements, function() {
        var $element = $(this);
        var element_height = $element.outerHeight();
        var element_top_position = $element.offset().top;
        var element_bottom_position = (element_top_position + element_height);

        //check to see if this current container is within viewport
        if ((element_bottom_position >= window_top_position) &&
          (element_top_position <= window_bottom_position)) {
          $element.addClass('in-view');
        } else {
          $element.removeClass('in-view');
        }
      });
    }

    if($(window).width() > 576){
        $window.on('scroll resize', check_if_in_view);
        $window.trigger('scroll');
    }

})(jQuery)

main.js is straight from a template that I am using. It has many other functions that also uses isotope, owl.carousel.

If I put main.js in /static, the error is gone but none of the functions in main.js seems to work. Even I couldn't find the code of main.js on a page anywhere.

Here, am I using jquery with webpack and gatsby correctly ? How to use wowjs with gatsby ?

from wowjs, gatsby - ReferenceError: WOW is not defined