Import WOW.js not working correctly with sage 9


#1

I was using WOW.js since a while with Sage 8 without any difficulty, but i’m clearly locked to import it with SAGE 9

npm install wowjs

Then i’ve tried a lot of things in main.js

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

But the result is always the same.

new WOW().init();  
ReferenceError: WOW is not defined

There’s proablby something wrong in he way i use, but i’am really not familar with Webpack

For the record, i have removed bootstrap for this project and replace it by materializecss.

I have alos tried to direclty create a wow.js file in my assets/script then add it to config.json and then put it with wp enqueue scripts, but eslint is stoping (more than 1660 errors ).

Finally, if i copy/paste the lib from github directly to the public/scripts/wow.js, and it’s working … but tat’s definivelly not the good way

My current main.js :

// import external dependencies
import 'wowjs/dist/wow.min.js';
import 'jquery';
import 'jquery-numerator';
import 'materialize-css/dist/js/materialize';
// import local dependencies
import Router from './util/router';
import common from './routes/Common';
import home from './routes/Home';
import aboutUs from './routes/About';
import postTypeArchiveDownload from './routes/Download';


// Use this variable to set up the common and page specific functions. If you
// rename this variable, you will also need to rename the namespace below.
const routes = {
  // All pages
  common,
  // Home page
  home,
  // About us page, note the change from about-us to aboutUs.
  aboutUs,
  // Download Archive Page
  postTypeArchiveDownload,
};

// Load Events
jQuery(document).ready(() => new Router(routes).loadEvents());

Sorry, my english is … as it

Any ideas ?


#2

Here’s how I got it working:

  1. npm install --save wow.js (note the . and --save flag)
  2. In Common.js:
import Wow from 'wow.js';

export default {
  init() {
    // JavaScript to be fired on all pages
    const wow = new Wow();
    wow.init();
  },
  finalize() {
    // JavaScript to be fired on all pages, after page specific JS is fired
  },
};

How to use npm installed jQuery plugins (or any npm packages)
Sage 9 Example of using /assets/scripts/routes ES6
Importing Materialize JS in Webpack with Sage 9
#3

or
import {WOW} from 'wow.js';

and all works great :slight_smile:


#4

I’m having a similar problem with js-cookie.

I added a .js file at assets/scripts/cookies.js with my cookie set/check script, and I’ve tried putting import 'js-cookie/src/js.cookie'; at the top of both cookies.js and the top of main.js and after building and reloading I always get ReferenceError: Can't find variable: Cookies in my browser.

EDIT: I also added cookies.js to my config.json!

I even tried copying my whole cookies.js script into Common.js and importing js-cookie there without any luck.

Where have I gone wrong?

Thanks!


#5

Try to do this in terminal in the sage root folder
npm install js-cookie

and then into you common.js file add this line on top of file
import Cookies from 'js-cookie'

and use it.


#6

That did it! Thank you!

Is there a handy way to determine whether I need to import Classname from 'library' or simply import library?


#7

Lol actually I don’t know. Generally I try any solution :smiley:


Sage 9 Adding and Enqueueing A JS Library
#8

Thanks, this is working with Sage 9 beta 2


#9

It’s worth noting that wow.js is no longer free for commercial use. I got 3/4 through a project recently before I noticed and had to find another library.


#10

That’s true. By the way, as WP is released under the GPLv2 (or later), the work derivated from a WordPress theme under Sage is also automatically GPLv2 (or later). On the wowJs Github page :

Open source license

If you are creating an open source application under a license compatible with the GNU GPL license v3, you may use this project under the terms of the GPLv3.

I am curious … there’s no way to build a theme for wordpress without beeing under GPL no ?


#11

This is a lifesaver, thank you!


#12

Thanks @benword,

So Sage 9 doesn’t automatically add the imports to main.js and main.scss like Sage 8?

If so, I agree this might be good!


#13

Thank you very much for this Ben