Uncaught TypeError: Cannot set property 'AOS' of undefined

[chancer4]

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.

[michalsnik]

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.

[dacmail]

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

[sntran]

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.

[manojgohel]

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

[kisonay]

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.

[NicolasPerl]

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.

[thgross]

You get that error when using

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

but not without the module-type:

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

[sntran]

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

[ineptian]

Hey guys is there any update here as to what possibly causes this? I installed via npm and am getting this error. I have successfully installed both slick and parallax.js via npm. So not quite sure why AOS is giving me an issue.

[Jollus174]

I was running into an issue where Babel was transpiling the file under these settings:

options: {
  sourceMap: true,
  presets: ['@babel/preset-env', {}],
  targets: '> 0.25%, not dead, not ie 11, not android 4.4.3-4.4.4'
},

Preventing the transpile of the /dist/aos.js file fixed the issue for me.

[naeemariyan]

Hello gyes, I am getting same issue, I try many ways, but facing still same issue aos.js:1 Uncaught TypeError: Cannot set properties of undefined (setting 'AOS')

anyone help me to solve this, I really appreciate

[CarlosGT7274]

broo, this is from a year ago but it's weird because I'm also having the same issue. I tried: import * as AOS from "./node_modules/aos/dist/aos.js";, it was working fine, but then I'm still getting errors. It's night time now, I'll be working on this tomorrow, so I hope you're around.

[bavarianbytes]

Imho AOS shouldn't use this so it gets ES6 module compatible. ES6 is the future.

[naeemariyan]

broo, this is from a year ago but it's weird because I'm also having the same issue. I tried: import * as AOS from "./node_modules/aos/dist/aos.js";, it was working fine, but then I'm still getting errors. It's night time now, I'll be working on this tomorrow, so I hope you're around.

OK, thanks. Please share with me if you find any solution.

[naeemariyan]

Imho AOS shouldn't use this so it gets ES6 module compatible. ES6 is the future.

Bro I am using ES6. How can I replace "this" with another value?

[bavarianbytes]

I think you can't. It is in the AOS library. The author has to change it or someone else has to fork the repo, rewrite it and create a pull request. Unfortunately i'am not so deep in the topic to do so.

[Foddie2]

Facing the same error in Nuxt3