CODEWITHSUNDEEP
javascriptnode.jsangular-ui-bootstrapwebstorm
seeseesky
seeseesky

Reputation: 33

Uncaught SyntaxError: Unexpected token < when using bootstrap js

Here is the code of my index.html:

<html>
  <head>
    <meta charset="UTF-8" >
    <title>Index</title>
    <link rel="stylesheet" href="styles/main.css" />
    <link rel="stylesheet" ng-href="bower_components/bootstrap/dist/css/bootstrap.min.css" />
 </head>
 <body ng-app="app">


    <div ng-view></div>

    <script src="bower_components/angular/angular.min.js"></script>
    <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="bower_components/angular-route/angular-route.min.js"></script>
    <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
    <script src="scripts/angular/app.js"></script>
    <script src="scripts/angular/controllers.js"></script>
 </body>
</html>

However, it shows the error in return:

bootstrap.min.js:1 Uncaught SyntaxError: Unexpected token <

ui-bootstrap-tpls.min.js:1 Uncaught SyntaxError: Unexpected token <

bootstrap_error

Is it the problem of my code or bootstrap? I found the error exists when I add 

<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>

and 

<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>

into the index.html. Does anyone know the cause of the error? Thanks :)

Upvotes: 3

Views: 25501

Answers (4)

Jacob Okello Okomo
Jacob Okello Okomo

Reputation: 381

Solution from Discord discussion: Working with Bootstrap, Angular, React, Vue

The problem occurs because sirv public --single decides to send index.html for any route/resource that doesn't exist in the public directory - Issue with Routing.

You'll know right away that you have a problem when you are requesting, say, an image and you get back 200 text/html response instead of a 404.

The browser will try to parse the index.html content as though it were an image (or script in the case of this bug) and barf out. Even worse is that the cache is now polluted with garbage data for that URL and the only way to fix it is:

  1. Clear the cache or disable the cache completely. as shown in the Chrome DevTools image below.
  2. Fix any broken/unavailable routes in your Frontend App
  3. Restart your Dev Server

Hope that helps... I know it drove me nuts for a while!

Upvotes: 0

Akbar Mirzaei
Akbar Mirzaei

Reputation: 129

It is because of files' addresses are not true, so make them correct. Based on my addresses:

 correct <link rel="stylesheet" href="./css/bootstrap.rtl.min.css" />

 wrong <link rel="stylesheet" href="/public/css/bootstrap.rtl.min.css" />

 correct  <script src="./js/bootstrap.bundle.min.js"></script>

wrong <script src="/public/bootstrap.bundle.min.js"></script>

Upvotes: -1

Neeraj Kumar
Neeraj Kumar

Reputation: 779

I was getting the same issue with the ASP.Net. All I had to do is to clean the solution and rebuild it.

Upvotes: 1

Bharath
Bharath

Reputation: 96

Its definitely a problem with the bootstrap file. The line 1 contains '<'.

Try manually opening the files and removing it.

Upvotes: 3

Related Questions