Aos: Uncaught TypeError: Cannot set property 'AOS' of undefined

Created on 11 Sep 2018  路  8Comments  路  Source: michalsnik/aos

Getting an error when trying to install AOS. Console leads me to line 8 which is the first function in the aos.js file.
!function (e, t) { "object" == (typeof exports === "undefined" ? "undefined" : _typeof(exports)) && "object" == (typeof module === "undefined" ? "undefined" : _typeof(module)) ? module.exports = t() : "function" == typeof define && define.amd ? define([], t) : "object" == (typeof exports === "undefined" ? "undefined" : _typeof(exports)) ? exports.AOS = t() : e.AOS = t(); }
am using the JS in the dist/ folder from the master branch. Not sure what else I am doing wrong. Please advise.

unconfirmed

Most helpful comment

Any update on this? I'm getting the same error.

Error:
undefined is not an object (evaluating 'e.AOS=t()')

I'm using gulp to concat my files and minify them. Everything works well when importing the CSS and js scripts via CDN. Below are the CDN scripts I'm using.

https://unpkg.com/aos@next/dist/aos.js
https://unpkg.com/[email protected]/dist/aos.css

I can't have external dependencies and wanted to simply copy and paste the CSS and js code from the script tags and place the code in their own local js and CSS files; however, I can't get rid of the error above. The issue is occurring on Safari, Firefox, and Chrome.

All 8 comments

Please use the next version and let me know if you still experience this problem, if yes - how does your environment look like, how do you import AOS on the page, what browser etc.?
master branch has been frozen for some time, I'm operating on v2 and next - once v3 is released next will become master again.

Same issue, I installed AOS from npm (npm install --save aos@next) and include library in my HTML and I get aos.js:1 Uncaught TypeError: Cannot set property 'AOS' of undefined

Installed 3.0.0-beta.6

That is the issue if I use ES6 module directly from the browser, i.e.:

<script type="module" src="app.mjs"></script>

app.mjs

import "../node_modules/aos/dist/aos.js";

AOS will try to set AOS to this, which, inside ES6 module, is undefined, and not window.

I also attempted to use dist/aos-esm.js, but it does not bundle lodash.*, preventing it from being loaded.

An option is to rollup using iife format instead of umd. Alternatively, with the es6 bundle, do not declare the dependencies as external in rollup.config.js.

This issue when module not imported
check all files and repleted files and module after try again. if have wiry comment.

what is the resolution of this? I've experiencing the same issue. I've concat' the dist file with my script file and aos appears before my code.

Any update on this? I'm getting the same error.

Error:
undefined is not an object (evaluating 'e.AOS=t()')

I'm using gulp to concat my files and minify them. Everything works well when importing the CSS and js scripts via CDN. Below are the CDN scripts I'm using.

https://unpkg.com/aos@next/dist/aos.js
https://unpkg.com/[email protected]/dist/aos.css

I can't have external dependencies and wanted to simply copy and paste the CSS and js code from the script tags and place the code in their own local js and CSS files; however, I can't get rid of the error above. The issue is occurring on Safari, Firefox, and Chrome.

You get that error when using

<script type="module" src="app.js"></script>

but not without the module-type:

<script src="app.js"></script>

@thgross That's correct. ES6 module is loaded differently than normal script.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

timotheegoguely picture timotheegoguely  路  3Comments

VeronikaMilic picture VeronikaMilic  路  4Comments

SueIte picture SueIte  路  3Comments

halverson picture halverson  路  4Comments

hockey2112 picture hockey2112  路  4Comments