Trying to import 3rd party library but bower and gulp drop because it has "too many errors"

sage
1

Hey guys,

So I am still kind of new to the SAGE theme but I absolutely love it so far. Been importing bower dependencies just fine until now so here’s what’s going on:

I tried to install Turn.js (which is a library to create magazine/book like page turners). Since it’s listed within the bower packages I figured it would be much easier than having to do it manually but it’s not being imported/recognized.

So here’s what I have done so far:

  1. Bower install --save turnjs
  2. Compiled scripts and tried to used it, functions not being recognized.
  3. Tried to check for the bower.json in: /bower_dependencies/turnjs/ I notice there’s no main array holding the files paths
  4. Tried adding an override to the main bower.json file which clearly didn’t work because there’s nothing to override (Assuming, since the main turnjs’ bower file doesn’t have that main array to be overriden in the first place)

When all this didn;t work, I tried the manual way. Went in and downloaded the files, added to my /assets/scripts/ folder, then went in and added them to the manifest.json in assets folder and also enqueued the script in setup.php from the /lib/ directory.

When I did this and tried to run gulp or gulp scripts it went down because the file has “too many errors” according to js-hint I guess. Now, I know for a fact this library works (might not be fully optimized but does what I need it do right now).

Any ideas as to what might be going wrong or how can I prevent the script analysis to take it down and not be compiled?
Thanks in advance.

2

Paste your manifest.json file please and the actual error messages. Also, see here for some node debugging steps you can take.

3

Here’s the manifest.json file im using:

{
  "dependencies": {
    "main.js": {
      "files": [
        "scripts/main.js"
      ],
      "main": true
    },
    "main.css": {
      "files": [
        "styles/main.scss"
      ],
      "main": true
    },
    "customizer.js": {
      "files": [
        "scripts/customizer.js"
      ]
    },
    "rebecana.js": {
      "files": [
        "scripts/rebecana.js"
      ]
    },
    **"turn.js": {**
**      "files": [**
**        "scripts/turn.js"**
**      ]**
**    },**
    "jquery.js": {
      "bower": ["jquery"]
    }
  },
  "config": {
    "devUrl": "http://rebecana.loc"
  }
}

The actual errors I get are regarding the turnjs’ code, but they’re all just warnings. I am attaching a screenshot below with these warnings and the abortion of the build process in case it helps clarify.

Pasted image477×742 33.4 KB

I don’t even know how or where to start fixing this.
By the way, I went in to the other post and tried the node debugging mentioned for calling on the asset builder module but its not letting me do that. I am assuming I have to do this from the theme folder and then run the commands provided “node” and require the asset builder module. Says "Cannot find module ‘asset-builder’ at Function.Module._resolveFilename (module.js:327:15)

4

Not sure where you went wrong but I got it up and running just fine in four steps.

  1. $ bower install --save turnjs#master

  2. Added this to my bower.json overrides.

    "turnjs": {
      "main": [
        "./turn.js"
      ]
    }
  1. Added this to manifest.json:
    "turn.js": {
      "bower": ["turnjs"]
    }
  1. Ran $ gulp.

If you’re doing that and running into issues then you must’ve made a change somewhere or something may be wrong with your installation. Paste errors here please.

1 Like
5

I must be doing something wrong. It’s definitely not compiling, al though I do not get that bunch of warnings and errors anymore when running gulp I still can’t seem to get the script actually included and usable.

I replicated those 4 steps mentioned above just to make sure, but the scripts is not coming through since I can’t call on an of it’s functions and if I try to include it manually I’ll get the thousands of errors mentioned in my first posts… Just can’t seem to get my head around this issue.

6

It’s definitely not compiling

Please help me help you. How do you know it’s not compiling? Is it giving you a message? What is the exact message or error you’re seeing and where are you seeing it?

Do you realize that the way you’ve modified your manifest.json means that gulp now spits out two script files? main.js and turn.js. If you want to use Turnjs then you need to enqueue the turn.js file that’s in your dist/scripts dir after you run gulp.

7

Ok, when I go into my website and inspect the source codes through the google console, the turn js script is no where to be found. That why I am saying it’s not compiling. I dont see the script within the dist/bower_dependencies folder

Also, when I try to run the library by initializing the book object with

$("#flipbook").turn({
  width: 400,
  height: 300,
  autoCenter: true
});

It says the turn function is not defined, meaning the whole library is not being included anyway. This is just weird, I dont know what am I missing`

8

Re-read this:

Do you realize that the way you’ve modified your manifest.json means that gulp now spits out two script files? main.js and turn.js. If you want to use Turnjs then you need to enqueue the turn.js file that’s in your dist/scripts dir after you run gulp.

Not sure how much clearer I can be.

9

You’re right. Not sure how I missed that, my bad.

Thanks a lot for your help @cfx , highly appreciated.

10

You’re welcome man, glad you figured it out. Rock on :metal: