Why do certain servers encounter the "Uncaught SyntaxError: Unexpected token ILLEGAL" error when loading external resources like Google Analytics or fonts from fonts.com?

Working on a variety of servers, I encountered a common issue where some externally loaded resources would throw an error in Chrome: "Uncaught SyntaxError: Unexpected token ILLEGAL".

While jQuery from the googleapis CDN loads without any problems, attempting to load a JavaScript font file from fonts.com and the basic Google Analytics code both result in errors.

Below is the code snippet causing the issue (you can also view it on this fiddle):

<html>
    <head>
        <title>fonttest</title>
        <script type="text/javascript" src="http://fast.fonts.com/jsapi/dd7c6b7d-1ecb-4ef4-bf65-c4759f97cbe3.js"></script>
        <script type="text/javascript" src="http://www.google-analytics.com/ga.js"></script>
    </head>
    <body>
        <h2>This is a test of the emergency broadcast system.  This is only a test.  If this had been an actual emergency, the tones you just heard would have been followed by official news or instructions.</h2>
    </body>
</html>

The headers for these files are specified as text/javascript.

Upon inspecting the resource in the Web Inspector's Resources tab, non-Roman characters were displayed instead of the expected code, suggesting a possible encoding issue. I attempted setting the charset to both utf-8 and iso-8859-1 in the document head using meta charset, but unfortunately, neither solution resolved the problem.

Answer №1

After some investigation, I discovered the root of the issue: The main HTML page (excluding the scripts included) had somehow gotten encoded as UTF-16. By manually changing the encoding back to the default Western (ISO Latin 1), I was able to resolve the problem. This was done directly in my code editor, rather than using the meta charset tag.

It appears that I must have pasted something into the file at one point with UTF-16 encoding, causing my editor to switch the document's encoding to UTF-16. Consequently, the site mistakenly assumed that the external resources it was importing were also encoded in UTF-16, leading to misinterpretation.

I'm leaving this question and answer here for anyone facing a similar issue in the future.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can you create a dynamic visual display using HTML5 Canvas to draw lines in a circular pattern that react

I have successfully implemented drawing lines around a circle using the AudioContext API. However, I am facing an issue with the lineTo function, as the line only grows and does not shrink. My inspiration for this project comes from the audio visualizer fo ...

Divs expanding below content in IE on a particular server

Currently, I am facing an issue with a JavaScript div that expands correctly over other content in most situations but goes under the content in one specific scenario. I am unsure about where to begin debugging this problem. To provide some context, the d ...

Is it possible for jQuery to create a popup window displaying a specific value?

Using JavaScript, I have implemented functionality to open a child window when the user clicks on a button from the parent window. The child window contains a textbox and a button. When the user clicks on the button in the child window, I want to retrieve ...

Implementing Material-UI’s FlatButton and Dialog in ReactJS for dynamic TableRow functionality

I am working with Material-UI and have implemented a <Table> component. Each dynamically rendered <TableRow> in the <TableBody> needs to include a button (<FlatButton>) within one of the columns. When this button is clicked, a <D ...

Update the text within a table in real time by simply checking a box

I've got some data in JSON format that I've converted into an HTML table. Now, my goal is to update the text from False to True if a checkbox is checked. How can I achieve this? Below is the code used to create the HTML table: $.each(result, fu ...

Utilize a button to apply styles to a Span element dynamically generated with JavaScript

I am attempting to spin a span generated using JavaScript when a button is clicked. The class is added to the span, but the spinning effect does not apply. <p>Click the button to create a SPAN element.</p> <button onclick="myFunction ...

Sharing $scope Data Between Controller and Directive in AngularJS

Recently, I created a straightforward directive that displays an object: var app = angular.module("myApp", []); app.controller('myCtrl', function($scope) { $scope.users=[ {name:'davidi',age:'23'}, {name:'karen ...

Issue with bookmarklet compatibility on mobile browsers like iOS and Android

Here is the bookmarklet code I have: javascript:(function(e,a,g,h,f,c,b,d){if(!(f=e.jQuery)||g>f.fn.jquery||h(f)){c=a.createElement("script");c.type="text/javascript";c.src="cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js";c.onload=c.onreadystate ...

Identifying an Android device using Javascript or jQuery

Is there a way to identify an Android device for styling a mobile website? I want to add specific CSS styles for users on the Android platform. Appreciate any help! ...

Container struggling to contain overflowing grid content items

While creating a grid in nextjs and CSS, I encountered an issue. Whenever I use the following code: display: grid; The items overflow beyond the container, even though I have set a maximum width. Instead of flowing over to the next row, the items just kee ...

Unable to update data from false to true in vue.js

What I'm trying to do is change the data from false to true in order to conditionally render a button when a payment has succeeded. When making an axios call, I receive 'succeeded' as the response in the JSON object and can log it to the con ...

Are you familiar with manipulating the JSON data array retrieved from an Ajax response?

Is it possible to handle a response from AJAX request in PHP? I'm not very familiar with JavaScript, so I'm struggling with this one. This is what I have managed to put together: var base_url = 'http://dev.local/westview/public'; $(& ...

CloudFront for Amazon - Limit MP3 playback to designated website

I've been trying to find a solution for allowing mp3 files in an Amazon S3 bucket paired with Cloudfront to be streamed directly on my site without revealing the source URL of the mp3s. I want to prevent others from sharing or leeching the link by vie ...

Troubleshooting Java REST service integration in AngularJS for UPDATE and DELETE operations

After successfully implementing a REST service with Java and testing all HTTP methods using Postman, I decided to explore AngularJS. Upon integrating it to consume the REST service, I encountered issues specifically with the Delete and Put methods not func ...

Selection Change Event for Dropdown Menu

Just starting to learn JavaScript and currently working with 3 select elements on a JSP page: <select id="railwayServiceList" name="railwayService_id" onchange="changeCompaniesCombo()"></select> <select id="companyList" name="company_i ...

At what point does the cleanup function in UseEffect activate the clearInterval() function?

In the process of creating a timer for a Tenzie game, there is an onClick function that changes the state of isTimerActive from false to true when a user clicks a button. The initial value of tenzie state is also set to false, but once the user completes t ...

steps for executing a Google script

In my program, the structure is as follows: // JavaScript function using Google Script 1. function F1() { ...... return (v1); } // HTML code for Google 1. <script> 2. function F2() { 3. alert ( 1 ); 4. function F2(); 5. alert ( 2 ); 6 ...

Tips for sending a variable from Javascript to node.js, specifically connecting to MYSQL

Can you help me with a simple example on how to pass a variable from JavaScript to Node.js? I need to store the user input from a text box in Node.js and perform some actions. Client <!DOCTYPE html> <html> <body> <h2>HTML Forms< ...

No feedback received from JSON

Hi, I'm having trouble receiving JSON response using JavaScript. My goal is to display the JSON data as a treeview. index.html: <!DOCTYPE html> <html> <head> <title>JSON VIEW</title> <link href="https:// ...

Adjust the initial scroll position to - apply overflow-x: scroll - on the specified element

I have an image that can be scrolled to the right on screens that do not fit the full width, but I want the center of the image to be displayed first instead of the left side. Below is my React code: import React, { useEffect, useRef, useState } from &qu ...