Error: Uncaught SyntaxError: Unexpected token <

Question

For some reason, I'm getting this error message:

Uncaught SyntaxError: Unexpected token <

For this line of code:

title: '<img src="/images/text/text_mario_planet_jukebox.png" id="text_mario_planet_jukebox"/>',

In this context:

$(document).ready(function() {
    $('#infobutton').click(function() {
        $('#music_descrip').dialog('open');
    });
        $('#music_descrip').dialog({
            title: '<img src="/images/text/text_mario_planet_jukebox.png" id="text_mario_planet_jukebox"/>',
            autoOpen: false,
            height: 375,
            width: 500,
            modal: true,
            resizable: false,
            buttons: {
                'Without Music': function() {
                    $(this).dialog('close');
                    $.cookie('autoPlay', 'no', { expires: 365 * 10 });
                },
                'With Music': function() {
                    $(this).dialog('close');
                    $.cookie('autoPlay', 'yes', { expires: 365 * 10 });
                }
            }
        });
    });

I think everything should be good to go, but I don't understand why the < is somehow throwing this off..

whoops, forgot to show where this is happening! My bad,

http://www.marioplanet.com/index.asp

Any ideas?

Me neither I don't understand. Maybe you would like to share some code and explain what you are trying to do, etc...? Showing the error is one thing but if you want to understand where this error comes from we need to see what is causing it (which undoubtfully is your code). Also tagging your question with the `error` tag doesn't bring much valuable information to it. — Darin Dimitrov, Sep 02 '10 at 18:25
That's not really a line of code. I mean, you can't execute it. At least give us enough context to see a full statement. — recursive, Sep 02 '10 at 18:26
K, my bad, I've tried to give it a little more context, and I forgot to give a link, which I originally intended to do.. — Qcom, Sep 02 '10 at 18:31
For me this error was caused by an incorrect file request path and the 404 page being returned was attempting to be parsed, resulting in the error. Hope this help ssomeone :D — DrCord, Sep 22 '14 at 15:35

score 43 · Accepted Answer · edited Mar 15 '13 at 15:03

This is a browser issue rather than a javascript or JQuery issue; it's attempting to interpret the angle bracket as an HTML tag.

Try doing this when setting up your javascripts:

<script>
//<![CDATA[

    // insert teh codez

//]]>
</script>

Alternatively, move your javascript to a separate file.

Edit: Ahh.. with that link I've tracked it down. What I said was the issue wasn't the issue at all. this is the issue, stripped from the website:

<script type="text/javascript"
    $(document).ready(function() {
    $('#infobutton').click(function() {
        $('#music_descrip').dialog('open');
    });
        $('#music_descrip').dialog({
            title: '<img src="/images/text/text_mario_planet_jukebox.png" id="text_mario_planet_jukebox"/>',
            autoOpen: false,
            height: 375,
            width: 500,
            modal: true,
            resizable: false,
            buttons: {
                'Without Music': function() {
                    $(this).dialog('close');
                    $.cookie('autoPlay', 'no', { expires: 365 * 10 });
                },
                'With Music': function() {
                    $(this).dialog('close');
                    $.cookie('autoPlay', 'yes', { expires: 365 * 10 });
                }
            }
        });
    });

Can you spot the error? It's in the first line: the <script tag isn't closed. It should be <script type="text/javascript">

My previous suggestion still stands, however: you should enclose intra-tagged scripts in a CDATA block, or move them to a separately linked file.

That wasn't the issue here, but it would have shown the real issue faster.

Oh wowwwwwww... Thanks for the spot, but that was pretty lame, anyway, I moved the js to a separate file for cleaner code and maintainability anyway. Thanks! — Qcom, Sep 02 '10 at 18:40
Can you catch such exceptions in jquery? Meaning, if my success method gets this uncaught exceptions, i would like to catch it and show some error message to the user. — codingbbq, Jan 14 '13 at 10:34
@noobcode If you don't structure your markup correctly, the javascript engine is going to fail miserably -- or not start at all. How errors in markup are handled are browser specific and I'm not sure any provide a mechanism you can hook to give the user a general purpose "I screwed up with the website you're trying to view" error message. — Randolpho, Jan 14 '13 at 15:59
In addition to this very good answer, I would suggest you to check also if there is a call to an unexistant JS file. — SequenceDigitale.com, Jan 18 '14 at 23:38

score 16 · Answer 2 · answered Jun 27 '14 at 02:19

16

I too got this error, when developing a Backbone application using HTML5 push state in conjunction with an .htaccess which redirects any unknown files to index.html.

It turns out that when visiting a URL such as /something/5, my /index.html was effectively being served at /something/index.html (thanks to my .htaccess). This had the effect of breaking all the relative URLs to my JavaScript files (from inside the index.html ), which meant that they should have 404'd on me.

However, again due to my htaccess, instead of 404'ing when attempting to retrieve the JS files, they instead returned my index.html. Thus the browser was given an index.html for every JavaScript file it tried to pull in, and when it evaluated the HTML as if it were JavaScript, it returned a JS error due to the leading < (from my tag in index.html).

The fix in my case (as I was serving the site from inside a subdirectory) was to add a base tag in my html head.

<base href="/my-app/">

answered Jun 27 '14 at 02:19

jeff-h

2,184
1
22
33

2

This fixed my issue - in my case I used - never thought it was a htaccess issue! – MistaJase Feb 13 '16 at 22:22
1

I ran into similar issue when using react-router with paths like "user/:userid". Adding the base tag in front of my resource URLs fixed it. Thanks @jeff-h! – Tim May 12 '16 at 19:24
this is true, but a consequence of the more general problem as described by [david.barkhuizen 's answer](https://stackoverflow.com/a/39034617/3645375) – Bernardo Dal Corno Sep 24 '17 at 23:43
we fixed redirection url Uncaught SyntaxError: Unexpected token '<' in html using by setting in index.html file header. Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec also resolved – pa1 Raju Apr 27 '22 at 00:14

david.barkhuizen · Answer 3 · 2016-08-22T07:15:32.747

10

Typically this happens when you are trying to load a non-html resource (e.g the jquery library script file as type text/javascript) and the server, instead of returning the expected JS resource, returns HTML instead - typically a 404 page.

The browser then attempts to parse the resource as JS, but since what was actually returned was an HTML page, the parsing fails with a syntax error, and since an HTML page will typically start with a < character, this is the character that is highlighted in the syntax error exception.

edited Aug 22 '16 at 07:15

answered Aug 19 '16 at 08:38

david.barkhuizen

5,239
4
36
38

Any chance to disable this behaviour? Don't get why jquery messes with resources tags – Bernardo Dal Corno Sep 24 '17 at 23:05
In my case this was caused, because the server was set up to only load libraries from "libs" folder, while I placed jquery in a different directory. – DarkTrick Oct 19 '20 at 01:41

WizardsOfWor · Answer 4 · 2013-03-05T13:38:29.830

9

I had the exact same symptom, and this was my problem, very tricky to track down, so I hope it helps someone.

I was using JQuery parseJSON() and the content I was attempting to parse was actually not JSON, but an error page that was being returned.

edited Mar 05 '13 at 13:38

answered Mar 04 '13 at 20:43

WizardsOfWor

2,974
29
23

zui · Answer 5 · 2022-02-08T10:59:42.070

3

After trying several solutions, this worked for me:

Go to IIS Manager
Open the Site
Click on Authentication
Edit Anonymous Authentication.
Select "Application pool identity"

edited Feb 08 '22 at 10:59

answered Apr 25 '18 at 14:01

zui

33
6

1

Please write here the solution instead of including a link -image- that could be broken in the future. Thanks! – Ignacio Ara Apr 25 '18 at 14:18
1

After wasting a lot of time. Found this as the solution – Asiri Dissanayaka Jan 23 '19 at 11:35
1

This was the fix I needed! Thank you! – Taylor Liss Jun 23 '21 at 18:59

score 1 · Answer 6 · answered Oct 07 '22 at 21:15

1

I don't know if this will be a late answer, or it'll help somebody somehow.

If you download JS files and paste them into your project directories, you have to place them into directories according to the requirements of some specific servers. For example, some servers strip out files and place them on a single BUILD or DIST folder. You can as well place the files directly inside the parent folder where your index file is and the problem will disappear.

answered Oct 07 '22 at 21:15

Mapenzi Mudimba

11
1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Oct 14 '22 at 11:48

score 0 · Answer 7 · answered Jun 20 '17 at 21:33

0

If you face this issue only in Chrome and in IE, for instance, everything is fine, then just enable checkbutton "Disable cache" in Dev Tools (F12 -> "Network" tab) and clear history in the last hour.

I had this problem and above solution worked for me.

answered Jun 20 '17 at 21:33

M. Stefanczuk

346
1
4
14

1

Please don't post identical answers to multiple questions. Post one good answer, then vote/flag to close the other questions as duplicates. If the question is not a duplicate, *tailor your answers to the question.* – Paul Roub Jun 20 '17 at 21:52
This answer saved the day for me! Thank you very much! – Yoni Rabinovitch Sep 30 '21 at 10:48

score 0 · Answer 8 · answered Nov 21 '20 at 04:54

I got this error while using the web app with firebase. It was due to not including the desired libraries in the index.html

To fix this in the development environment, I added following line of code in the index.html

<script src="https://www.gstatic.com/firebasejs/8.1.1/firebase.js"></script>

Use the necessary libraries instead of importing all the js sdk when you are planning to deploy for production.

Greg · Answer 9 · 2012-11-04T20:36:18.247

-1

It usually works when you change the directory name, where the file is. It worked for me when I moved it from "js/" to "../js"

edited Nov 04 '12 at 20:36

answered Nov 04 '12 at 20:29

Greg

993
7
14

score -1 · Answer 10 · answered Jul 05 '17 at 00:36

try to replace the text/javascript to text/html then save the note and reload browser then bring it back to text/javascript.. I don't know but for unknown reason this one works with me.. I am searching and copy-pasting and I just accidentally undo what I am typing then boom kablooey it worked 0.O by the way I am just noob.. sorry I just thought it could help though..

score -2 · Answer 11 · answered Aug 20 '11 at 02:00

I don't know whether you got the answer. I met this issue today, and I thought I got a possible right answer: you don't put the script file in a right location.

Most people don't meet this issue because they put the scripts into their server directory directly. I meet this because I make a link of the source file (the html file) to the server root directory. I didn't link the script files, and I don't know how nginx find them. But they are not loaded correctly.

After I linked all files to the server root directory, problem solved.

Error: Uncaught SyntaxError: Unexpected token <

11 Answers11

Linked