WOW not defined using npm package.

[jasonlam-swatow]

I did this:

npm install wowjs

and required it:

import WOW from 'wowjs

and tried to use it:

let wow = new WOW({
  boxClass: 'wow',
  animateClass: 'animated',
  offset: 0,
  live: true
});

But I got Uncaught ReferenceError: WOW is not defined at console.

[graingert]

@jasonlam0619 run:

npm install wow.js

Then use:

import WOW from 'wow.js'
const wow = new WOW({
  boxClass: 'wow',
  animateClass: 'animated',
  offset: 0,
  live: true
});

[suarezph]

Hi grain I used wow.js instead of wowjs, because it is not working with import ... from 'wowjs'

and then tried the code you have provided.

when I run in my html
<h1 class="nomargin size-50 weight-300 wow rollIn" data-wow-delay="0.5s"> blah blah </h1> <p class="lead font-lato size-30 wow fadeInUp" data-wow-delay="0.7s"> blah blah </p>

the output is it has no animate, see the screenshot:

[graphan]

@graingert unfortunately, the code you mentioned does not work. Something changed?

[kaueburiti]

@graingert i have tried this code, but did not worked :/

[johhansantana]

any luck here?

[kaueburiti]

@JSantana90 i totally give up

[suncoastkid]

Same issue here...

[shealan]

Same issue. Surely rather important as most developers are using NPM dependencies these days?

[badalsurana]

same issue here, anyone found any solution?

[interphased]

Not sure if this helps, but I got it to work using require and adding it to window.

bootstrap.js

const WOW = require('wowjs');

window.wow = new WOW.WOW({
    live: false
});

whatever.js

window.wow.init();

[ruchernchong]

new WOW.WOW().init();

in your HTML file works instead of having to place it in your app.js to compile.

[adammoisa]

This didn't work either. I used new WOW.WOW().init() but it still doesn't work. I can see in the rendered html that the animated class is indeed being added, but the animation doesn't run.

[ruchernchong]

@adammoisa Did you import WOW in anywhere of your scripts?

[Steven-Garcia]

I'm getting the same problem, it used to work fine with this line in the controller: new WOW().init(); and importing the script in the index.html, now I get the same error and it just won't work at all

[adammoisa]

@Ruchern yes of course. As I said it adds the animated class to the HTML which I think implies the package is 'working' to some degree...

[ruchernchong]

@adammoisa I'm sorry. I did not mean that.

Do you have window.WOW = require('wowjs')?

Try either window.WOW or window.WOW() I cannot remember which one I tried before. Ever since moving to UIKit, I took WOW out.

[gaboesquivel]

the module exports an object, the WOW constructor function is inside the returned object.

const WOW = require('wowjs').WOW

[xHeinrich]

window.WOW = require('wowjs').WOW worked for me

[ruchernchong]

import { WOW } from 'wowjs'
window.WOW = WOW

Perhaps this might work too.

[Sydney-o9]

With require

const {WOW} = require('wowjs');

[TanvirAmi]

To Leverage Undefined Values make sure that your DOMm is ready and likely when a dependent variable is not defined. When the page is loaded and ready, and likely when a dependent variable is already defined.
For this use $(document).ready(function() { if ($.fn.init) { new WOW().init(); } });

[jhoanborges]

window.WOW = require('wowjs').WOW worked for me

This works like a charm

[mugianto]

window.WOW = require('wowjs').WOW worked for me

Thanks bro this work for me

[766]

Not sure if this helps, but I got it to work using require and adding it to window.

bootstrap.js

const WOW = require('wowjs');

window.wow = new WOW.WOW({
    live: false
});

whatever.js

window.wow.init();

Thanks bro this work for me

[vipertecpro]

window.WOW = require('wowjs').WOW;

  function wowAnimation() {
    new WOW({
      boxClass:   'wow',
      animateClass: 'animated',
      offset: 0,
      mobile: true
    }).init();
  }

  wowAnimation();

[kshvab]

React + Next js + typescript Works fine:

useEffect(() => {
        const WOW = require("wowjs/dist/wow.js");
        if (typeof window !== "undefined") {
            (window as any).WOW = WOW;
        }

        new WOW.WOW().init();
    }, []);

[veraLX]

Hello，我是林昕，我已收到来信~

[Aaryan6]

Try this, It works for me

// import wowjs if window is not undefined

const isServer = typeof window === "undefined";
const WOW = !isServer ? require("wowjs") : null;

// then write this code in the function

useEffect(() => {
    new WOW.WOW().init();
  }, []);

I hope this is useful ; )

[harapeko]

it works for me : )

• "@sveltejs/kit": "1.15.2",
• "wow.js": "^1.2.2" (not wowjs)

npm i --save wow.js

import { onMount } from 'svelte'

onMount(async () => {
	import('wow.js').then((WOW) => {
		new WOW.default().init()
	})
})

or

onMount(async () => {
	const wow = await import('wow.js')
	new wow.default().init()
})

[Cayllen]

#252 (comment)
Harepo how does it work for you with sveltekit? I have it implemented but none of the animations work. Did you do have to do some extra work to make it work?

[nelson1995]

I found a better way to do it and it works.

Currently I’m using

• “vue” : “3.3.4”
• “wow.js” : ”1.2.2”
• “ animate.css”: “4.1.1”

1. Install wow.js

   npm install wow.js
   

2. In your SFC or *.vue file add this

   onMounted(async () => {
     const wow = await import(‘wow.js’)
     new wow.default().init()
   }
   

3. In your template add the wow class to any HTML tag element like this

   <template>
     <div class=“wow fadeInUp”></div>
   </template>
   

[veraLX]

Hello，我是林昕，我已收到来信~