Unexpected token < in first line of HTML

javascript html angularjs syntax-error uncaught-exception

171,243

Solution 1

Your page references a Javascript file at /Client/public/core.js.

This file probably can't be found, producing either the website's frontpage or an HTML error page instead. This is a pretty common issue for eg. websites running on an Apache server where paths are redirected by default to index.php.

If that's the case, make sure you replace /Client/public/core.js in your script tag <script type="text/javascript" src="/Client/public/core.js"></script> with the correct file path or put the missing file core.js at location /Client/public/ to fix your error!

If you do already find a file named core.js at /Client/public/ and the browser still produces a HTML page instead, check the permissions for folder and file. Either of these might be lacking the proper permissions.

Solution 2

In my case I got this error because of a line

<script src="#"></script>

Chrome tried to interpret the current HTML file then as javascript.

Solution 3

I experienced this error with my WordPress site but I saw that there were two indexes showing in my developer tools sources.

Chrome Developer Tool Error So I had the thought that if there are two indexes starting at the first line of code then there's a replication and they're conflicting with each other. So I thought that then perhaps it's my HTML minification from my caching plugin tool.

So I turned off the HTML minify setting and deleted my cache. And poof! It worked!

Solution 4

Check your encoding, i got something similar once because of the BOM.

Make sure the core.js file is encoded in utf-8 without BOM

Solution 5

Well... I flipped the internet upside down three times but did not find anything that might help me because it was a Drupal project rather than other scenarios people described.

My problem was that someone in the project added a js which his address was: <script src="http://base_url/?p4sxbt"></script> and it was attached in this way:

drupal_add_js('',
    array('scope' => 'footer', 'weight' => 5)
  );

Hope this will help someone in the future.

View more solutions

171,243

simi kaur

Updated on July 10, 2022

Comments

simi kaur almost 2 years

I have an HTML file :

<!DOCTYPE HTML>
<html lang="en-US" ng-app="Todo">
<head>
    <meta charset="UTF-8">
    <title>DemoAPI</title>

  <meta name="viewport">

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>

<link rel="stylesheet" href="./Client/css/styling.css" />
<script type="text/javascript" src="core.js"></script>

</head>

The error says:

Uncaught SyntaxError: Unexpected token <    core.js: 1

It shows the error at <!doctype html> of the app.html.

core.js looks like this:

angular.module('Todo', [])

.controller('mainController', function($scope, $http)
{
    $scope.formData = {};

    // get all and show them
    $http.get('/musicians')
        .success(function(data) {
            $scope.todos = data;
            console.log(data);
        })
        .error(function(data) {
            console.log('Error: ' + data);
        });

        //get with an id
        $scope.getOneTodo = function() {
        $http.get('/musicians' + id)
            .success(function(data) {
                $scope.todos = data;
                      console.log(data);
            })
            .error(function(data) {
                console.log('Error: ' + data);
            });
    };
      // send the text to the node API
    $scope.createTodo = function() {
        $http.post('/musicians', $scope.formData)
            .success(function(data) {
                $scope.formData = {}; // clear the form 
                $scope.todos = data;
                console.log(data);
            })
            .error(function(data) {
                console.log('Error: ' + data);
            })
    };

    // delete 
    $scope.deleteTodo = function(id) {
        $http.delete('/musicians' + id)
            .success(function(data) {
                $scope.todos = data;
                      console.log(data);
            })
            .error(function(data) {
                console.log('Error: ' + data);
            });
    };

    /*
    $scope.updateTodo = function(id) {
        $http.delete('/musicians' + id)
            .success(function(data) {
                $scope.todos = data;
                      console.log(data);
            })
            .error(function(data) {
                console.log('Error: ' + data);
            });
    };*/

});

It also gives me Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.14/$injector/modulerr?p0=Todo&p1=Error%3A%2…gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A17%3A381)

Besides, in console, when I click at core.js, it shows the contents of app.html and name it core.js.

Here is the snapshot:

Showing app.html instead of core.js

Also, as in the image, when I click index.html, it shows app.html. However, I do not have any file that is named index.html and I load app.html by default instead of index.html.

I have tried adding/removing type="text/javascript" but no help with that either.

Also, status 200 is returned on get request for core.js.

Status: 200

What might be wrong?

Austin Brunkhorst almost 9 years

What's the contents of core.js?
squill25 almost 9 years

The problem is not in the HTML; it's in core.js. Try getting the newest version (assuming core.js is a framework; otherwise, check your code)
Sebastian Simon almost 9 years

Does core.js also contain something like “404 - File not Found”?
simi kaur almost 9 years

@Xufox: Please see the update.
simi kaur almost 9 years

@AustinBrunkhorst: Please check the update.
Sebastian Simon almost 9 years

Still a bit confused… the HTML file you showed contains a <!DOCTYPE HTML> at the beginning. Does the error really point to <!doctype html>? Because they are different as the one is all caps and the other one is lower-case. Are you sure the core.js file can be found under the specified URL?
simi kaur almost 9 years

The error does point to <!DOCTYPE HTML> and if I remove it, it points to next html tag. and yes, it returns 200 for get request to core.js.
M4N almost 9 years

Your last screenshot shows GET /core.js, but in the HTML file you have /Client/public/core.js. Is the latter path correct?
simi kaur almost 9 years

@M4N: To avoid any path issues, I placed core.js in the same folder as app.html.Have the snapshot as per the the update and updated it in question as well.
Rajiv Pingale almost 9 years

Most of the time, I faced this error when braces are not closed properly. Check all braces once.
simi kaur almost 9 years

@Xufox: Made some changes and now it responds with 404 for core.js.
M. Stefanczuk almost 7 years

Possible duplicate of Error: Uncaught SyntaxError: Unexpected token <

John Slegers almost 9 years

@RobG : It depends on your server config. On an Apache server, it's pretty common to reference all paths to "index.php" when no file is found. In that case, missing .js files are replaced with the content of your website's frontpage or a 404 error page, again depending on your config.
RobG almost 9 years

Ok, your answer explains that now. ;-)
John Slegers almost 9 years

@simikaur : So did you fix the initial problem or didn't you? It's not clear to me what exactly is happening now! Also, could you please post your code on jsfiddle.net or jsbin.com? That makes it a lot easier for us to see what's going on!
RIanGillis over 7 years

My machine was lagging and I accidentally moved my Scripts folder into another folder.
Vasily Hall about 7 years

I am doing an asp.net mvc 5 website and this happened to me because I was messing around and pasted in a line into my web config file which caused all css mime types to be text/html and all my js files to -yes- contain the entire site in them, of course with 100% errors as you'd expect.
aspnetdeveloper almost 7 years

I got the same error and this fixed it for me. My site runs on IIS and for some reason suddenly the server couldn't find the js file. I just moved it to another folder and then it was fine.
Anjana Silva over 5 years

Genius! Saved hours of frustration. It was simply a missing file for me. Thank you :)
Kugan Kumar almost 3 years

I had this issue in angular 6 app , it was due to browser cache, incognito mode solved it.
Sunderam Dubey about 2 years

This does not really answer the question. If you have a different question, you can ask it by clicking Ask Question. To get notified when this question gets new answers, you can follow this question. Once you have enough reputation, you can also add a bounty to draw more attention to this question. - From Review
MaxBauer416 about 2 years

Thank you very much! I didn't notice that the js file was unreachable...you saved me from a bad headache