Javascript files from bower packages not being loaded

sage
1

Hello! I am using Sage 8.5.3 to build a website. Running into issues with a Bower Package (AOS), and I believe the issue to be that the Javascript files from the package are not being loaded, since the css appears to load as the asset I wish to animate on scroll is not displayed. I have only installed the bower package with bower install aos --save, and not made any other changes to any manifest.json or so. Am I missing something in regards to how to include JS packages into Sage?

Thanks!

1 Like
2

I am also experiencing this same issue.

Does your main.js file located in dist/scripts have the javascript of the imported bower package injected?

In my case the dist/scripts/main.js has the required JavaScript however cannot be initialised from the front-end.

3

Thanks for your reply!

The main.js in dist/scripts has the code from the bower injected. I can’t seem to understand why it’s not working.

4

I used AOS on a Sage 8.5.1 project without issue. AOS.init(); needs to be called outside of Sage’s DOM-based Routing), e.g. in main.js:

(function($) {

  AOS.init();

  var Sage = {
    // ...
  };

})(jQuery); // Fully reference jQuery after this point.
5
  1. Installed AOS using bower bower install --save aos
  2. Verified that JS has been injected to dist/scripts/main.js
  3. Added AOS.init(); outside of Sage’s DOM-based Routing
  4. JS still not available on front-end and returns the following error:

AOS is not defined.

All packages installed over bower seem to be injected into dist/scripts/main.js, however are not available once called inside assets/scripts/main.js.

6

Is that the only error in the javascript console? Did you also check the network section of DevTools to see if there are any files that aren’t loading correctly?

Please can you share your bower.json file?

Lastly, what happens if you try running AOS.init() directly in the javascript console once the page has loaded?

7

No other errors in the console.

Bower.json

{
  "name": "sage",
  "homepage": "https://roots.io/sage/",
  "authors": [
    "Ben Word <ben@benword.com>"
  ],
  "license": "MIT",
  "private": true,
  "dependencies": {
    "bootstrap": "git://github.com/twbs/bootstrap.git#v4.0.0-beta",
    "popper.js": "^1.12.3",
    "aos": "^2.2.0"
  }
}

The following files are being loaded inside the network section of DevTools:

  • jquery.js
  • jquery-migrate.min.js
  • wp-embed.min.js
  • main.js

When entering AOS.init(); in the console the same error is returned:

AOS is not defined

8

When you get this message, is it a standard JS console error? Is that literally all it says or are there some other details (eg. “Uncaught ReferenceError”). Does it appear red in the console? Maybe you can provide us with a screenshot of your console…

It looks like the AOS code is not properly included in your dist/scripts/main.js

9

Hrm, that’s strange.

Installed AOS 2.2.0 on a fresh Sage 8.5.3 install just now, and couldn’t duplicate the error (AOS worked as expected).

composer create-project roots/sage your-theme-name 8.5.3

Added to base.php:

<div data-aos="fade-zoom-in" data-aos-offset="200" data-aos-easing="ease-in-sine" data-aos-duration="600"></div>

Added to main.js:
AOS.init();

npm install && bower install && bower install --save aos && gulp
1 Like
10

I have solved the issue now, and it was all my own fault. In fact it is quite humorous.

At first I forgot the AOS.init(). When I had included it I had instead managed to write “aos-data” rather than “data-aos” in the HTML selector. So, it was all my mistake :slight_smile:

4 Likes
11

Just created a fresh install also and it working perfectly fine. Must have corrupted something in the previous project directory.

Thanks all for the help.

2 Likes