"Uncaught TypeError: a.indexOf is not a function" error when opening new foundation project
JavascriptJqueryCssGoogle ChromeZurb FoundationJavascript Problem Overview
I've created a new Foundation 5 project through bash, with foundation new my-project
. When I open the index.html file in Chrome an Uncaught TypeError: a.indexOf is not a function
error is shown in the console, originating in jquery.min.js:4
.
I created the project following the steps on the foundation site, but I can't seem to get rid of this error. Foundation and jQuery look like they are included and linked up correctly in the index.html file, and the linked app.js file is including $(document).foundation();
Does anyone know what is causing this error? and what a solution might be?
Javascript Solutions
Solution 1 - Javascript
This error might be caused by the jQuery event-aliases like .load()
, .unload()
or .error()
that all are deprecated since jQuery 1.8. Lookup for these aliases in your code and replace them with the .on()
method instead. For example, replace the following deprecated excerpt:
$(window).load(function(){...});
with the following:
$(window).on('load', function(){ ...});
Solution 2 - Javascript
Please add below jQuery Migrate Plugin
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-1.4.1.min.js"></script>
Solution 3 - Javascript
This error is often caused by incompatible jQuery versions. I encountered the same error with a foundation 6
repository. My repository was using jQuery 3
, but foundation requires an earlier version. I then changed it and it worked.
If you look at the version of jQuery required by the foundation 5 dependencies it states "jquery": "~2.1.0"
.
Can you confirm that you are loading the correct version of jQuery?
I hope this helps.
Solution 4 - Javascript
I faced this issue too. I was using jquery.poptrox.min.js
for image popping and zooming and I received an error which said:
> “Uncaught TypeError: a.indexOf is not a function” error.
This is because indexOf
was not supported in 3.3.1/jquery.min.js
so a simple fix to this is to change it to an old version 2.1.0/jquery.min.js
.
This fixed it for me.
Solution 5 - Javascript
One of the possible reasons is when you load jQuery TWICE ,like:
<script src='..../jquery.js'></script>
....
....
....
....
....
<script src='......./jquery.js'></script>
So, check your source code and remove duplicate jQuery load.
Solution 6 - Javascript
I'm using jQuery 3.3.1
and I received the same error, in my case, the URL was an Object
vs a string.
What happened was, that I took URL = window.location
- which returned an object. Once I've changed it into window.location.href
- it worked w/o the e.indexOf
error.
Solution 7 - Javascript
It's seems to be funny but no one take consideration of the following.
-
Discover if you are having a library that requires an old version of jQuery. If you can't discover the version, You can do it commenting and uncommenting every script line until you find it.
-
Open the library and find the author.
-
Search in google for an update of the library. 90% you will find it.
-
Update the reference of your obsolete library that requires and old version of jQuery.
> IN ANY CASE NEVER DOWNGRADE YOUR JQUERY VERSION
Solution 8 - Javascript
I solved this by installing the correct version of Jquery
that my project required using npm