In Chrome's developer tools, there's an interesting quirk where variables may be displayed as undefined, yet the tool

Having some trouble adequately explaining and defining the issue at hand, I can only pinpoint it occurring in Chrome DevTools, with the code compiled using Parcel and TypeScript version 4.4 or higher.

Specifically, I'm observing an issue a few lines past line 500 where const parsed appears undefined both on hover and within the scope window. Logically, if it were truly undefined, accessing parsed.type and subsequently .value at line 506 should result in errors.

https://i.sstatic.net/AY2CQ.png

However, on progressing to line 507, surprisingly enough, parsed now contains data as reflected in the scope window which previously showed 

{type: 'ok', value: 'custom-plot'}
.

https://i.sstatic.net/CV8Ia.png

Although my exposure to Parcel is limited, I believe a refined webpack configuration would enhance debugging experiences with TypeScript. How can I effectively commence debugging this scenario?

At the very least, I aim to instruct the debugger to move beyond line 500 to unveil the contents of the variable post that assignment.

EDIT

Following an upgrade to Parcel, the situation has improved considerably; however, I remain intrigued by the root cause within the tool chain triggering this behavior.

typescriptgoogle-chrome-devtoolssource-mapsparceljs

Answer №1

It's likely that the problem stemmed from Parcel or its internal tools (such as swc, babel, tsc) in your setup. Source maps generated by Parcel can sometimes have bugs that lead to issues like mismatches between where the debugger stops and what is actually happening in your code. Upgrading Parcel and observing the issue disappearing supports this theory. Check the Parcel changelog for any source-map related bug fixes. If problems persist, consider simplifying the issue and reporting a bug with Parcel.

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

Connecting to an unfamiliar attribute of a div element using Angular 12

Looking to dynamically change the value of an attribute in my component using property binding. <div class="app-container" [data-theme]="theme"> <router-outlet></router-outlet> </div> import { Component } from ...

angulartypescript

Exploring the power of Typescript alongside Styled Components and Material UI

Working with Typescript in conjunction with MUI and Styled-Components may lead to the need to pass props directly to MUI elements to address type errors... const Index = () => { return ( <StyledButton variant="contained" > ...

javascriptreactjstypescriptmaterial-uistyled-components

Tips for retaining spaces in a multiline string when setting a helm value using cdktf

Currently, I am utilizing CDKTF to facilitate the deployment of the datadog helm chart into a kubernetes cluster. My objective is to assign a specific value to confd, however, the issue arises when the spaces in my typescript multiline string do not mainta ...

javascripttypescriptterraformterraform0.12+terraform-cdk

Tips for managing numerous HTTP requests in Angular 6

I have a method that is trying to chain together 3 requests like this: showProfileDetails() { this.getUserInfo(this.currentUser.id).pipe( mergeMap(e => this.getAccounts(this.currentUser.id) ), mergeMap(e => this.getPayments ...

javascriptangulartypescriptrxjsobservable

Is it possible to package a Node.js application that utilizes Express and EJS together?

I am currently trying to bundle my nodejs application that utilizes express and ejs, but I am encountering a parcel error in the process My app functions properly when started using the standard method: node app.js However, I encounter an error when atte ...

node.jsexpressejsparceljs

What is the solution to resolving the websocket.onclose issue in Thirdweb?

I'm a beginner with next.js and I'm currently working on a website that utilizes web3 technology, so I need to incorporate thirdweb. My first step was running the following command to add thirdweb to my project: yarn add @thirdweb-dev/react @thi ...

typescriptnext.jsweb3-reactthirdweb

Need to import a custom module using npm and TypeScript

Exploring two projects: main-project and lib-project, both written in TypeScript and compiled to common JavaScript using gulp. Our objective is to require lib-project in main-project. lib-project |-- package.json |-- gulpfile.js |-- dist |-- index.js ...

javascriptnode.jsnpmtypescript

How can a nullable variable be converted into an interface in TypeScript?

Encountered an issue while working on a vue3.x typescript project. The vue file structure is as follows: <template> <Comp ref="compRef" /> </template> <script lang="ts" setup> import {ref} from "vue& ...

typescriptvue.jsvuejs3

hide elements only when there is no string to display in Angular2/Typescript

As I experiment with my javascript/typescript code, I've encountered an issue where a string is displayed letter by letter perfectly fine. However, once the entire string is shown, the element containing it disappears and allows the bottom element to ...

angulartypescript

Learning to retrieve the value from a dynamically generated input tag in a TypeScript file

<div *ngFor="let task of arrayList"> <input id="task.fieldName" *ngIf="task.key === 'Others'" type="text" class="form-control"> </div> When dealing with dynamically created input fields based on a condition, the challenge is ac ...

angulartypescript

Organizing Telephone Number Entries in Angular

In my search for a way to format a phone number input field in Angularjs, I have come across many solutions, but none specifically for Angular 7. What I am looking to achieve is for the user to enter the textfield like so: 123456789 and have the textfi ...

angulartypescriptformatphone-number

How come JSON.parse is altering the data within nested arrays?

In my journey to master Angular 2, I decided to challenge myself by creating a Connect Four game using Angular CLI back when it was still utilizing SystemJS. Now, with the switch to the new Webpack-based CLI, I am encountering a peculiar issue... The fun ...

javascripttypescriptweb-workerangular-cli

Steps to display a modal dialog depending on the category of the label

I'm encountering an issue where clicking on different labels should show corresponding modal dialogs, but it always displays the same modal dialog for both labels ("All Recommendations"). Can anyone offer guidance on how to resolve this problem? Thank ...

typescript

Reselect.createSelector() function in Typescript compiler returns incorrect type definition

It seems that the .d.ts file for reselect (https://github.com/reactjs/reselect) is accurate. So why am I experiencing issues here... could it be a problem with the Typescript compiler or my tsconfig? To replicate the problem: Demo.ts import { createSele ...

javascriptreactjstypescriptreact-nativereselect

TypeScript encounters difficulty in locating the namespace within a Node.js dependency

I am faced with a situation where I have two node.js packages that each contain type declaration files. In package a, there is a namespace declared that I want to reference in package b. Package A index.d.ts declare namespace foo { export interface A ...

node.jstypescripttypescript-typings

Utilizing a basic promise in Node.js to handle database queries efficiently

As someone who typically develops in Java, I am new to Node.js and trying to create a REST service that pulls data from Firebase and returns it as a JSON object. I've been grappling with the concept of "promises" and although I grasp the idea behind ...

node.jstypescriptrestexpresspromise

Declaration of types for invoking the lodash `mapKeys` function

Is there a way to create a function that can map object keys from camelCase to snakeCase, and be used multiple times with different objects? I have already written a function called mapKeysToSnakeCase which does the job, but I'm curious if there is a ...

typescriptlodash

Exploring ways to effectively test material2 icons using unit tests

This particular component utilizes material icons. https://i.sstatic.net/GpDSr.png Currently, I am delving into learning unit testing with karma (via angular cli/webpack) and have most of the configuration set up to create the component. However, I am en ...

unit-testingangulartypescriptangular2-directivesangular-material2

Error: Cannot locate 'import-resolver-typescript/lib' in jsconfig.json file

Issue: An error occurred stating that the file '/Users/nish7/Documents/Code/WebDev/HOS/frontend/node_modules/eslint-import-resolver-typescript/lib' could not be found. This error is present in the program because of the specified root file for c ...

javascripttypescriptvisual-studio-codefrontendnext.js

Using the value of an object as a parameter for another object in Javascript

Assuming I have the following variables: var key = "Section"; course.key = "101"; After running this code, I encounter an error stating that course.key is unidentified. My intention is to set course.Section = "101". Is there a way to pass the value of ke ...

javascripttypescript