Wow.js with webpack and react

Question

I try to implement wow.js using react and webpack.

I install it via npm.

npm install --save wow.js

It install perfectly. Now the problem is how to import it properly. I can't make it work keep getting undefined.

I've tried few way:

First:

import wow from 'wow.js';

But webpack can't compile it. It says the module cannot be found. Even I using complete url import wow from /node_modules/wow.js

Second:

I'm using this solution from here:

require('imports?this=>window!js/wow.js');

But I still get cannot find modules (i change the path to my node_modules).

Third:

From here:

I'm using the expose module and try to new WOW().init(); it says Wow is undefined.

I'm not using his first solution because I want my html to look simple only has bundle.js script.

I can't found any other solution. What should I do to make it work?.

Thanks!

my webpack.config.js:

module.exports = {
    entry: [
        'webpack-dev-server/client?http://localhost:8080',
        'bootstrap-loader',
        'webpack/hot/only-dev-server',
        './src/js/index.js'
    ],
    output: {
        path: __dirname + "/build",
        publicPath: "/build/",
        filename: 'bundle.js'
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin(),
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery"
        })
    ],
    module: {
        loaders: [
            {
                exclude: /node_modules/,
                loader: 'react-hot!babel'
            },
            {
                test: /\.css$/,
                loader: 'style!css!postcss'
            },
            {
                test: /\.scss$/,
                loader: 'style!css!postcss!sass'
            },
            { test: /\.(woff2?|ttf|eot|svg|otf)$/, loader: 'url?limit=10000' },
            {
              test: 'path/to/your/module/wow.min.js',
              loader: "expose?WOW"
            }
        ]
    },
    resolve: {
        extensions: ['', '.js', '.jsx']
    },
    devServer: {
        historyApiFallback: true,
        contentBase: './'
    },
    postcss: [autoprefixer]
};

I think you're installing wow.js when its just wowjs acc to their github page. https://github.com/matthieua/WOW — Adam Moisa, May 17 '17 at 14:38

score 13 · Answer 1 · answered Dec 08 '16 at 15:00

13

Alternative option without updating your wepack config.

Install WOW.js: npm install wowjs
Import in your component: import WOW from 'wowjs';

Under componentDidMount() of your component: new WOW.WOW().init();

import React, {Component} from 'react';
import WOW from 'wowjs';

class Cmp extends Component {
  componentDidMount() {
    new WOW.WOW().init();
  }

  render() {
    /* code */
  }
}

export default Cmp;

answered Dec 08 '16 at 15:00

Leonard Laput

141
1
6

3

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. – Adam Moisa May 17 '17 at 14:54
This worked great for me! Followed your instructions and voila! – protoEvangelion May 23 '17 at 20:00
3

What about these errors: `MutationObserver is not supported by your browser.` & `WOW.js cannot detect dom mutations, please call .sync() after loading new content.` Does anybody knows how to get rid of them? – Kuzma Oct 14 '17 at 16:26
import {WOW} from 'wowjs'; not working in version 1.1.3 had some weird error about weakmaps – Mudasar Rauf Jun 25 '18 at 10:41

Oleksandr T. · Accepted Answer · 2016-01-30T09:06:04.643

7

Do the following steps

Install exports-loader

npm i exports-loader --save-dev

Add to webpack.config.js this loader

{
   test: require.resolve('wow.js/dist/wow.js'), 
   loader: 'exports?this.WOW'
}

add import to your app

import WOW from 'wow.js/dist/wow.js';

edited Jan 30 '16 at 09:06

answered Jan 30 '16 at 08:32

Oleksandr T.

76,493
17
173
144

could you please look at this question https://stackoverflow.com/questions/54255074/wowjs-gatsby-referenceerror-wow-is-not-defined ? – Valay Jan 21 '19 at 09:51
1

wowjs 1.1.3^ goes like `test: require.resolve('wowjs/dist/wow.js'),`, no dot in wowjs import – Marko Apr 09 '19 at 14:20

score 0 · Answer 3 · edited Nov 29 '17 at 06:14

0

You can also change .call(this) to .call(window) (wow.js last line). Found this solution here https://foundation.zurb.com/forum/posts/46574-how-to-add-js-library-from-bower

edited Nov 29 '17 at 06:14

adiga

34,372
9
61
83

answered Nov 29 '17 at 05:28

Carlos Aleman

101
3
11

Wow.js with webpack and react

3 Answers3