How can I get VS Code to utilize the inline sourcemaps in my gatsby-node.ts file during debugging?

After consulting the official manual, I have incorporated the following content into my launch.json:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Gatsby build",
      "type": "pwa-node",
      "request": "launch",
      "program": "${workspaceRoot}/node_modules/.bin/gatsby",
      "args": ["build"],
      "runtimeArgs": ["--nolazy"],
      "console": "integratedTerminal",
      "runtimeExecutable": "/home/user/.asdf/shims/node"
    }
  ]
}

Utilizing gatsby-plugin-ts-config, I am able to write my gatsby-node.ts file in TypeScript. To achieve this, a gatsby-config.js was created with the following setup:

const { generateConfig } = require('gatsby-plugin-ts-config');

const config = generateConfig({
  configDir: '.gatsby'
});

module.exports = config;

Subsequently, a .gatsby/gatsby-node.ts was added containing:

import { ITSConfigFn } from 'gatsby-plugin-ts-config';

const node: ITSConfigFn<'node'> = () => ({
  onCreatePage: async ({ page, actions }) => {
    console.log(page);
  }
});

export default node;

A breakpoint was placed on the line featuring console.log(page);.

Upon debugging using Gatsby build, a new TypeScript file opens with the resulting code block.

(function (exports, require, module, __filename, __dirname) { "use strict";

exports.__esModule = true;
exports.default = void 0;

const node = () => ({
  onCreatePage: async ({
    page,
    actions
  }) => {
    console.log(page);
  }
});

var _default = node;
exports.default = _default;
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImdhdHNieS1ub2RlLnRzIl0sIm5hbWVzIjpbIm5vZGUiLCJvbkNyZWF0ZVBhZ2UiLCJwYWdlIiwiYWN0aW9ucyIsImNvbnNvbGUiLCJsb2ciXSwibWFwcGluZ3MiOiI7Ozs7O0FBRUEsTUFBTUEsSUFBeUIsR0FBRyxPQUFPO0FBQ3ZDQyxFQUFBQSxZQUFZLEVBQUUsT0FBTztBQUFFQyxJQUFBQSxJQUFGO0FBQVFDLElBQUFBO0FBQVIsR0FB...

It appears that the displayed file is not the original one. What could be causing Visual Studio Code to overlook the inline source map?

Further details

Code - OSS
Version: 1.50.1
Commit: d2e414d9e4239a252d1ab117bd7067f125afd80a
Date: 2020-10-15T10:42:48.064Z
Electron: 9.3.2
Chrome: 83.0.4103.122
Node.js: 12.14.1
V8: 8.3.110.13-electron.0
OS: Linux x64 5.9.1-arch1-1

Answer №1

When switching from Babel to tsNode, everything seems to be working fine. To enable tsNode in the project, make sure to update the configuration for gatsby-plugin-ts-config in your gatsby-config.js file like this:

const { generateConfig } = require('gatsby-plugin-ts-config');

const config = generateConfig({
  configDir: '.gatsby',
  tsNode: true // +++ Enable tsNode
});

module.exports = config;

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

List of nested objects converted into a flat array of objects

Looking to transform a data structure from an array of objects containing objects to an objects in array setup using JavaScript/Typescript. Input: [ { "a": "Content A", "b": { "1": "Content ...

the process of altering properties in vue js

After running my Vue file, I encountered the following console error. As someone new to Vue programming, I'm attempting to utilize a Syncfusion UI component to display a grid. Prop being mutated: "hierarchyPrintMode" I am unsure where to add the comp ...

Transmitting image data (blob) from the frontend to the backend using Next.js and tRPC (T3 stack)

I'm currently facing a challenge in sending a leaflet map image from the backend to the frontend using the leaflet-simple-map-screenshoter library for capturing the image. The library returns a blob, which I need to transmit back to the backend and sa ...

Discover all potential matching strings and substrings within an array

Searching for a way to identify matching strings and substrings in an array. For example: Given a string "3-100" and an array of strings ["3", "3-1", "3-15", "3-",3-10", "3-100"]. When looping through the array, the expected outcomes should be: "3" -> ...

The error "Property 'user' does not exist on type 'Session'." occurred while attempting to pass session data using express-session and accessing req.session.user

I'm currently working on creating a basic login form for users to access a website, where I plan to store their session data in a session cookie. The express-session documentation provides the following example for setting it up: app.post('/login ...

In Internet Explorer 10, scripts are only executed when a tab is initially loaded

Upon loading a page in IE 10, scripts only execute on the initial load per tab. However, after I reload the page, the js does not run, resulting in a server-side rendered page and an empty Console tab in the developer tools. No errors are reported. This be ...

The object is given a value in the form of a string, even though it is a strongly-typed variable

I'm encountering something unusual in my code. In the following example, there is a (change) event that captures the current value selected by the user from a dropdown menu. <div style="padding-right: 0; width: 100%;"> <label st ...

Interactive checkboxes with data entry fields

Is there a way to achieve the following design? I need to place a textfield next to the last checkbox, but right now, the last checkbox is not aligned with the rest. Does anyone have an idea on how to make this possible? Would using CSS solve the issue? T ...

What is the process for bringing a graphql file into typescript?

I'm having trouble importing a graphql file and encountering an error import typeDefs from "./schema/schema.graphql"; 10 import typeDefs from "./schema/schema.graphql"; ~~~~~~~~~~~~~~~~~~~~~~~~~ at cre ...

Establish a connection to a mongoose database within Visual Studio Code

Hi there, I'm in the process of setting up a blog using Node and mongoDB in Visual Studio Code. I successfully installed mongoDB and the Azure extension, and everything seems to be functioning properly. However, when I try to run the command mongod, i ...

Discovering the secrets of monitoring changes in children's length in React

Here is the code I am working with: const container = useRef(); const [items, setItems] = useState(); useEffect(()=>{ setItems(container.current.children.length); },[container.current, container.current.children.length]) return( <div ref={contain ...

The function call with Ajax failed due to an error: TypeError - this.X is not a function

I am encountering an issue when trying to invoke the successLogin() function from within an Ajax code block using Typescript in an Ionic v3 project. The error message "this.successLogin() is not a function" keeps popping up. Can anyone provide guidance on ...

How do you define prop types when passing them in Nextjs?

Welcome to my page import { InferGetServerSidePropsType, GetServerSideProps } from 'next' import ProductList from '../../component/product/ProductList' export interface Item { title: string price: number } const products ...

What is the best way to retrieve HTML content using an Angular method?

Okay, so the title might not be the greatest...but I couldn't think of anything better: I want to emphasize search keywords in the result list...that's why I'm having trouble with this problem. CSS: .highlightText{ font-weight: bold; } In ...

Failed attempt to create a React project using TypeScript

Encountering a problem while using create-react-app with the typescript template, even though it worked previously. However, when attempting to use create-react-app without a template like JSX, everything sets up smoothly. The cause of this issue eludes me ...

The distinction between TypeScript generics: Differences between a generic function type and the call signature of an object literal type (Type 'T' does not match type 'T')

I'm currently working on developing an RxJS operator that waits for the input operator to complete before switching to a second operator generated dynamically using switchMap. I have created two versions of the code, one that works perfectly and anoth ...

Creating a Typescript definition that includes a custom constant enumeration allows for precise

Struggling to generate TypeScript definition files for a specific library. The library contains a method that requires a parameter of type number, limited to a specific set of numbers. Therefore, I aim to specify in my definition that it necessitates an e ...

Tips for removing extra spaces when assigning a dynamic data-automation-id

I am currently developing a time selection widget in Angular to compare our current performance with previous data. This widget consists of two dropdown lists along with various buttons and input fields (for now, let's focus on the dropdown lists). I ...

Translate Typescript into Javascript for use in React applications

Can anyone assist me in converting this Typescript code to Javascript? function ImageMagnifier({ src, width, height, magnifierHeight = 100, magnifieWidth = 100, zoomLevel = 1.5 }: { src: string; width?: string; height?: string; magnifie ...

Creating assets from typescript plugins in Angular 6: A comprehensive guide

Situation I am currently in the process of migrating from Angular 4 and Angular Seed to Angular 6 and Angular CLI. Challenge One issue I am facing is with dynamic loading of plugins within a component using SystemJS. SystemJS.import("client/plugins/" + ...