"Uncaught TypeError: a.indexOf is not a function" error when opening new foundation project

Question

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?

The top-voted answer below should be accepted! It explains the problem, links to POD, and gives a clear solution, in a short post. — HoldOffHunger, Jan 21 '21 at 16:26

score 1153 · Answer 1 · edited Aug 14 '19 at 06:48

1153

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(){ ...});

edited Aug 14 '19 at 06:48

someOne

1,975
2
14
20

answered Oct 26 '16 at 02:25

Daniel Llano

11,568
1
9
7

4

I didn't have it with 2.2.1 @User, but as soon as I switched to 3.3.1 I had to make this change. – Codemonkey Aug 28 '18 at 10:12
@Crine `$(function() {});` is for document ready, which is not the same thing as the window load event. Also, doc ready often fires before window load. – Robert Jun 17 '19 at 20:56
Hello man, could you tell me why? before it was working with version 1.12.3 and it stopped working when I migrated to 3.4.1 – Armando Marques da S Sobrinho Oct 17 '19 at 15:12
Not Working Dear, i am using jquey 3.3.1 version. Thanks. – Kamlesh Jan 27 '20 at 10:36
@Kamlesh- if the solution for this issue doesn't solve your problem then it you'll need to post a new question, including examples specific to your issue and what you've tried. – ashleedawg Feb 12 '20 at 19:10
2

Worked like a charm. $(window).on('load', function(){ – ControlZ Apr 01 '20 at 22:00
This was the issue, it can also be fixed by applying jquery-migrate-1.4.1.js – Steef Nov 24 '20 at 18:40
@FreddieE or moderator, Please check this as the correct answer – Sayed Abolfazl Fatemi Apr 10 '22 at 10:58
this is the correct answer and must be accepted. Thanks, Also downgrading is not a solution as suggested by some others. – Harsha Aug 26 '22 at 10:16
I have used a code from a new sticker. This was build on jQuery v1.10.2 mine is jQuery v3.6.0. So I was facing the error. Thank you – Sourav Sarkar Sep 05 '22 at 13:23

score 77 · Answer 2 · answered Apr 04 '19 at 10:45

77

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>

answered Apr 04 '19 at 10:45

Govarthanan Venunathan

1,269
10
10

3

I confirm that this has fixed the issue. – Morad Hamdy May 29 '20 at 20:40
thats fixed my issue, Thanks – Ramazan Zülkarneyn Nov 26 '20 at 09:34
2

How can this possibly work? Installing jQuery migrate is for code migrations, and installing jQuery-specific versions address version issues. None of these could solve this problem long-term. – HoldOffHunger Jan 26 '21 at 03:39
For me, this could be a temporary workaround while a 3rd party plugin you are using still has an incompatible jquery version with your own website. Until the plugin updates it, this seems to be a viable solution. I understand that this is not the migrate script's purpose yet still it can be a workaround. – reikyoushin May 11 '21 at 08:15

score 39 · Answer 3 · edited Oct 25 '16 at 09:08

39

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.

edited Oct 25 '16 at 09:08

Hari Harker

702
1
12
29

answered Aug 17 '16 at 01:46

shaune

1,020
8
12

Foundation 5.5.1 states `jQuery >= 2.1.0`: https://github.com/foundation/foundation-sites/blob/a89eb88ab344b6639e0dd7df63a97324d97a89ad/bower.json – Daniel Jan 27 '21 at 19:30

score 21 · Answer 4 · edited Feb 12 '20 at 19:12

21

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.

edited Feb 12 '20 at 19:12

ashleedawg

20,365
9
72
105

answered Apr 02 '18 at 14:20

Harshit Pant

1,032
11
14

2

I moved to 3.2.1 to 2.1.0 and it worked. This worked for me. – Siddharth Apr 29 '18 at 09:21
Welcome ! @Siddharth – Harshit Pant Dec 28 '18 at 05:05
11

never ever back down to versions as it may result in majorly security issues. – Ajay Takur Mar 03 '20 at 09:49
2

If that is the case: you can replace the below code $(window).load(function(){...}); with the following: $(window).on('load', function(){ ...}); that would also work! :) – Harshit Pant Mar 09 '20 at 09:44
Its not good to revert back to older version. – Asfandyar Khan Feb 08 '21 at 13:41
DO NOT DO THIS. Search for an update of your library or fix your library. – Leandro Bardelli Jun 18 '21 at 15:41

T.Todua · Answer 5 · 2018-12-28T13:47:31.710

15

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.

edited Dec 28 '18 at 13:47

answered Oct 26 '17 at 21:30

T.Todua

53,146
19
236
237

3

It happens with wordpress, loading its own version, if you are also loading a jquery version on your side. – Olou Dec 28 '18 at 14:15

score 3 · Answer 6 · answered Mar 03 '19 at 12:15

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.

score 0 · Answer 7 · answered Jun 18 '19 at 09:50

0

I solved this by installing the correct version of Jquery that my project required using npm

answered Jun 18 '19 at 09:50

Ntiyiso Rikhotso

644
6
15

Leandro Bardelli · Answer 8 · 2021-11-29T13:02:45.093

0

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

edited Nov 29 '21 at 13:02

answered Jun 18 '21 at 15:45

Leandro Bardelli

10,561
15
79
116

1

You are right, it my case there was library requires older version of jQuery – Gopal Joshi Nov 29 '21 at 10:09
This is just general advice but doesn't answer the question. – Colin 't Hart Apr 26 '23 at 10:27
@Colin'tHart in my case, resolve the version was the answer to the same problem. – Leandro Bardelli Apr 26 '23 at 10:39

"Uncaught TypeError: a.indexOf is not a function" error when opening new foundation project

8 Answers8

Linked