TypeScript is not compatible with the intended ECMAScript version

Out of the blue, it seems like my VS17 has started transpiling my TypeScript to ECMAScript 6, but now VS is not accepting it and throwing a bunch of SCRIPT1002 and SCRIPT1006 errors suddenly: "JavaScript critical error at line 3, column 5 in http://localhost:57125/Scripts/js/Modules/Test.js\n\nSCRIPT1002: Syntax error"

This is the simplified TS module I have:

module Test {
    export class TestObject {
        Data: string;
    }
}

It gets transpiled to

var Test;
(function (Test) {
    class TestObject {
    }
Test.TestObject = TestObject;
})(Test || (Test = {}));
//# sourceMappingURL=Test.js.map

However, Visual Studio is flagging class as a syntactical error.

What it should be generating (and was doing so until recently) is

var Test;
(function (Test) {
    var TestObject = (function () {
        function TestObject() {
        }
        return TestObject;
    }());
    Test.TestObject = TestObject;
})(Test || (Test = {}));

I suspect that VS (or maybe IE11?) is expecting ECMAScript 5, but changing the version in the project settings isn't helping (tried ECMAScript 3, 5, 6, 2016, 2017, and Next). I have TS 2.8, 3.0, and 3.1 installed, but switching between them doesn't solve the issue. The module system is set to AMD, yet this hasn't made any difference for me either...

Any suggestions on how to resolve this? I've rebooted VS multiple times and even restarted my computer just in case some rogue process was causing the problem.

Answer №1

It seems I was the one who caused the issue this time. After pressing CTRL+F5 in IE, the problem was resolved.


I recently made the decision to switch to ES version 6 due to some specific syntax that I wanted to implement. However, I never completed the code and only revisited it two days ago. Initially, everything worked smoothly during the first two debugging sessions, most likely because no changes had been made. Suddenly, things took a turn for the worse.

Reverting back to ES5 didn't make a difference - the error persisted with the code still reflecting ES6. This prompted me to inspect the transpiled JS files which revealed that they were indeed in ES5 format. It dawned on me that this could be a caching issue.

Upon further investigation, it became apparent that IE had cached the ES6 JS files, feeding back the outdated information to VS along with error messages. A simple solution of pressing CTRL + F5 completely cleared up the problem.

Interestingly, I also discovered that IE only supports ES5.

A sarcastic thank you goes out to IE for consuming a day and a half of my time.

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

Endless [React Native] onFlatList onEndReached callback invoked

Attempting to create my debut app using ReactNative with Expo, I've hit a snag with FlatList. The components are making infinite calls even when I'm not at the end of the view. Another issue might be related; across multiple screens, the infinite ...

Tips for Fixing Error: "We received a visitor for node type TSSatisfiesExpression that is not recognized as a valid type."

There seems to be an issue with Babel unable to compile my Storybook code. I'm working on setting up a boilerplate with Storybook and Next.js I've searched for a solution to this problem but couldn't find one. Any help would be greatly app ...

Generating Legible JavaScript Code from TypeScript

I am looking to maintain the readability of my compiled JS code, similar to how I originally wrote it, in order to make debugging easier. However, the typescript compiler introduces several changes that I would like to disable. For instance: During compi ...

Guide on refreshing threejs morph targets using blender GLTF shape keys

I have been working with a Blender file that contains multiple shape keys. By adjusting the slider in Blender, I am able to manipulate these shape keys. (screenshot): Currently, I am exporting the GLTF and then importing it into Three.js. Upon console.l ...

Switching images through onmouseover, onmouseout, and onclick interactions

I have two images named img1 and img2. Here is my code: function roll(id, img_name, event_name, img_id) { var state ; if(event_name == 'mouseover') { state = false;rollover();} else if(event_name == 'mouseout') { ...

Simple steps for integrating JavaScript ads into your WordPress website

Received an advertisement from my client, a 300x250 ad in ad folder consisting of 1 HTML file, 1 JavaScript file, and 1 images folder. Questioning how to integrate these files into the side panel of my Wordpress website's homepage. I've spent a ...

The Bootstrap 4 Modal has a one-time activation limit

It seems that I mistakenly created two modals. The issue arises when I open either of them for the first time and then close it, as from that point on, neither modal is able to be opened again by performing the same action that initially worked. https://i ...

Issue encountered with websocket connection while attempting to include dependencies

My current project involves integrating charts for the graphical component using React within an Electron software. I've added interaction with buttons (sections) to insert different data into the graphs based on user clicks on one of the sections. Th ...

Property undefined with all alert points filled

According to the console, I am facing an issue while trying to route to the dashboard after logging in because the surname property is undefined. However, when I check my alerts, I can see that it is filled correctly at all times. login(surName: string, pa ...

Conditional types allow the function parameter type to be determined based on the type of another parameter

Here: function customFunction<T extends boolean> (param1: T, param2: T extends true ? number[] : number) { if (param1) { let result: number[] = param2; // Type 'number' is not assignable to type 'number[]'.(2322) } } ...

Adjust the color according to the key's value in every object within the array

Issue: I am faced with an array of objects, each containing a Name key. At times, the names may be repeated. I want to maintain the same color when the name is the same and switch to a different color when the name changes. Specifically, I want to alternat ...

Undefined type in JavaScript

Below is the JavaScript code snippet I have written. function bar() { var x = "Amy"; x = parseInt(x); console.log(x); if (isNaN(x)) { console.log("Your entry is not a number"); } else { if (typeof (x) === "number") { console.log("number" ...

Run code after all images have been rendered in vuejs

Is there a way to execute code after all images have loaded, specifically needing to set the scroll in a specific position? Using nextTick() processes the code before the images are loaded. The mounted and created methods can't be used since the code ...

What is the method for deactivating body parser json and urlencoded specifically on certain website links?

let shouldParseRequest = function (req) { let url = req.originalUrl; return (url.startsWith('/api/payments/stripe-webhook') || url.startsWith('/uploadimg')); } let parseJSON = bodyParser.json({ limit: '900kb' }); let u ...

What is the method for extracting the text from the currently chosen option?

const desiredOption = x.match(/<option selected="selected" value='[^']*'>([^<]*)<\/option>/)[1]; What is the best way to extract the text content from the selected option in the given string? ...

Count duplicated values in an array of objects using JavaScript ES6

I am working on creating a filter for my list of products to count all producers and display them as follows: Apple (3) I have managed to eliminate duplicates from the array: ["Apple", "Apple", "Apple"] using this helpful link: Get all non-unique values ...

Ajax appends a single row, not an entire array

My ajax function is retrieving an array of data from the backend, but when I try to display it in the blade, only one row appears instead of multiple rows. List of Problems Only 1 row is appended by ajax The select option is empty when the results return, ...

Create a video player in your HTML code using the class "afterglow", and also link a separate class to it for additional styling

I'm encountering some challenges with a project that involves a JS file for a Bootstrap modal popup and an HTML5 video player. The issue I'm facing is that I am unable to link the class for the video player theme. Can anyone here assist me in ide ...

I am facing an issue where my video file is not being recognized by Next.js when using TypeScript

In my project using next.js, typescript, and tailwindcss, I encountered an issue while creating the Masthead for my website. I wanted to set a video as the background, but for some reason, the video was not being recognized. I tried moving it to differen ...

What is the best way to ensure one div expands to full width while simultaneously hiding another div on the page?

Hey there, I'm looking for a way to expand the width of a clicked div while making the other div disappear from the screen simultaneously. It should also be toggleable, so clicking the button again will shrink the div and bring back the other one. For ...