Getting js.map Files to Function Properly with UMD Modules

I am experiencing an issue with debugging TypeScript files in Chrome and Firefox. Specifically, when trying to debug the MapModuleTest.ts file, the debugger seems to be out of sync with the actual JavaScript code by two lines. This discrepancy makes setting breakpoints and tracking variable values confusing.

Is this a known bug related to UMD generation for .map files?

The debugger window further complicates the situation as the local variables displayed do not match what is logged to the console.

https://i.sstatic.net/C1DpW.jpg

Here are the corresponding JS and Map files:

MapTest.js

var Test;
(function (Test) {
    function myTest() {
        var zero = 0;
        var two = zero + 2;
        var four = two + two;
        var six = four + two;
        console.log(six);
    }
    Test.myTest = myTest;
})(Test || (Test = {}));
//# sourceMappingURL=MapTest.js.map

MapTest.js.map

{"version":3,"file":"MapTest.js","sourceRoot":"","sources":["MapTest.ts"],"names":[],"mappings":"AAAA,IAAO,IAAI,CASV;AATD,WAAO,IAAI;IAEV;QACC,IAAM,IAAI,GAAG,CAAC,CAAC;QACf,IAAM,GAAG,GAAG,IAAI,GAAG,CAAC,CAAC;QACrB,IAAM,IAAI,GAAG,GAAG,GAAG,GAAG,CAAC;QACvB,IAAM,GAAG,GAAG,IAAI,GAAG,GAAG,CAAC;QACvB,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAClB,CAAC;IANe,WAAM,SAMrB,CAAA;AACF,CAAC,EATM,IAAI,KAAJ,IAAI,QASV"}

MapModuleTest.js

(function (factory) {
    if (typeof module === "object" && typeof module.exports === "object") {
        var v = factory(require, exports);
        if (v !== undefined) module.exports = v;
    }
    else if (typeof define === "function" && define.amd) {
        define(["require", "exports"], factory);
    }
})(function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var Test;
    (function (Test) {
        function myTest() {
            var zero = 0;
            var two = zero + 2;
            var four = two + two;
            var six = four + two;
            console.log(six);
        }
        Test.myTest = myTest;
    })(Test = exports.Test || (exports.Test = {}));
});
//# sourceMappingURL=MapModuleTest.js.map

MapModuleTest.js.map

{"version":3,"file":"MapModuleTest.js","sourceRoot":"","sources":["MapModuleTest.ts"],"names":[],"mappings":";;;;;;;;;;;IAAA,IAAc,IAAI,CASjB;IATD,WAAc,IAAI;QAEjB;YACC,IAAM,IAAI,GAAG,CAAC,CAAC;YACf,IAAM,GAAG,GAAG,IAAI,GAAG,CAAC,CAAC;YACrB,IAAM,IAAI,GAAG,GAAG,GAAG,GAAG,CAAC;YACvB,IAAM,GAAG,GAAG,IAAI,GAAG,GAAG,CAAC;YACvB,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;QAClB,CAAC;QANe,WAAM,SAMrB,CAAA;IACF,CAAC,EATa,IAAI,GAAJ,YAAI,KAAJ,YAAI,QASjB"}

Answer №1

I have identified a bug and have reported it for fixing. Here is the link to track progress:

https://github.com/Microsoft/TypeScript/issues/25079

Update

After further investigation, I discovered that the issue was related to the es6-promise library I had been using to polyfill promises. Once I switched to a version of something greater than or equal to es6 for my compiling, the mapping function started working correctly.

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

Is there a way to incorporate the load page plugin specifically for JavaScript while ensuring that my PHP code is still functional?

Is there a way to implement the loading page plugin "PACE" for PHP code execution instead of just JavaScript? I am more comfortable with PHP, CSS, and HTML, but not very experienced in JavaScript/AJAX. The PACE plugin is designed to show a progress bar fo ...

Mastering state management for various input types in React

Developing a proof of concept for showcasing tennis player details on a webpage. The page can display information for any number of players, and the user should be able to update all player details simultaneously. I have created 3 components: PlayersPage, ...

How can I link to a different field in a mongoDB Schema without using ObjectID?

I have created two schemas for books and authors: const bookSchema = new mongoose.Schema({ title: String, pages: Number, description: String, author: { type: mongoose.Schema.Types.ObjectId, ref: 'Author' } }); const Book = mongoose.model ...

Locate the index of an item within an array of objects based on a matching property in the

My current situation involves having an array of objects structured like this : [ {label: "<p>Opacity | %<br/></p>", customRow: false, id: 0, items: Array(13)}, {label: "Brand_hs_id", customRow: false, id: 0, items: A ...

Having issues with regEX functionality in an Angular form

I need to validate a phone number using regEX. My criteria is as follows: 10 digits alpha/numeric, where an Alpha CHAR is in the 4th position (excluding hyphens). For example: 586R410056  NNN ANN NNNN  (NNN) ANN NNNN  NNN-ANN-NNNN  (NNN) AN ...

pretending to make an ajax call using jQuery

To enhance the user experience of file upload, I have implemented a fake ajax request. When the user clicks submit, the form disappears, a loading graphic appears, and after a few seconds, the page refreshes to display the newly uploaded image. However, e ...

Converting milliseconds to a valid date object using Angular form validation

I am facing an issue with form validation and milliseconds in my Angular application. It seems that Angular does not consider time in milliseconds as a valid date format, causing the angular.isDate(1418645071000) function to return false. How can I modify ...

Encountering a Typescript error when defining a curried function after an uncurried function

Upon placing the uncurried definition of a method above the curried definition, I encountered an error stating: Expected 1 arguments, but got 2.ts(2554). The dtslint test that failed reads as follows: function match(regExpression: RegExp, str: string): st ...

Could the inner object's value be retrieved from the wrapper object in a Vuex getter prior to mounting?

Currently grappling with a challenge while working on Vuex and VueJS involving the Computed property. To sum it up, I have a nested object within the Vuex state, attempting to retrieve a key from this inner object in a Vuex getter to display the value in ...

How can we leverage RxJS combineLatest for observable filtering?

I'm exploring the possibility of utilizing combineLatest in an Angular service to eliminate the need for the activeFiler$ switch block (The service should achieve the same functionality). Currently, this is the structure of the component design (stack ...

Tips for incorporating a live URL using Fetch

I'm having some trouble with this code. Taking out the &type = {t} makes it work fine, but adding it causes the fetch to not return any array. let n = 12 let c = 20 let t = 'multiple' let d = 'hard' fetch(`https://opentdb.com/ ...

Geometry is making its debut appearance in ThreeJS for the very first time!

Currently, I am experimenting with a simple script using ThreeJS to create a point wherever you click on the screen. Below is the function responsible for adding the point: function addPoint(coord){ var geometry = new THREE.BufferGeometry(); var verti ...

React in 2022 has encountered an unexpected expression when it was expecting either an assignment or function call

I am having difficulty updating a chart with values received from an API. I am unsure about how to adjust the useEffect hook in my code. Any advice would be greatly appreciated. Here is a snippet of my code: import React, { useEffect, useState } from &quo ...

Bring in all SCSS styles from a single file and apply them to a React component

I am attempting to incorporate the entire SCSS file into a React component. I attempted to use the styleName props but was unsuccessful import React from 'react' import Calendar from 'calendar' import { calendarStyles } from './ ...

Incorrect behavior of responsive background images

For the first time, I am working on a school project that requires me to create a responsive website. I am following the "mobile first" approach. On stackoverflow, I came across a helpful way of making background images responsive: background-image: url(. ...

Scraping data from the web using R and creating interactive plots with hover text in Plotly without

I'm attempting to extract hover text content from plotly traces that have been shared online. This is a new type of scraping for me, and I'm exploring ways to accomplish this task in R without relying on selenium or phantomjs, possibly with the u ...

What could be causing "Unknown property" errors when using unicode property escapes?

The MDN website provides examples of matching patterns with unicode support, such as: const sentence = 'A ticket to 大阪 costs ¥2000 ...

Troubleshooting problem with jQuery's .has() and .click() functions

I have created a lengthy html code: <div id="el"> <p data-skip>Blablabla</p> // On click, toggle this, and toggle next p <p data-skip>Blablabla</p> // On click, toggle this, and toggle next p <p data-skip>Bl ...

How can I match dates in order to run the following code?

If Purchase Date is after 31/Mar/xxxx it should not calculate elap_yend, rem_days, depre_cur, cur_wdv. Also I have to calculate GST with some options that is if SGST and CGST are chosen, I should not calculate IGST else if IGST selected or marked it shoul ...

Unexpected token < error encountered during parsing in jQuery Ajax long polling append

How can I create a real-time ticker similar to Facebook using Jquery Ajax long poll and PHP? I encountered an error in my script that displays "error parsererror (SyntaxError: Unexpected token <)". What could be causing this error in my code? Here is ...