Debugging Gatsby TypeScript in v2

What is the correct way to debug a v2 Gatsby project made in TypeScript?

I’ve managed to get the debugger running, thanks to debugging-the-build-process guide.

But it only worked for .js files, like gatsby-node.js, both in Chrome and VSCode.

Are there additional steps for TypeScript, or is it even possible?

[azdanov]

By using source-map-loader webpack plugin I’ve managed to sync sourcemaps, before there were similar issues as here.

@m-allanson Should it be included by default in gatsby-plugin-typescript?

module.exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    devtool: "source-map",
    module: {
      rules: [
        {
          test: /\.js$/,
          use: ["source-map-loader"],
          enforce: "pre"
        }
      ]
    }
  });
};

Need to figure out how to make it work for incline-source-map.

[azdanov]

I’ve found a way to debug components with TypeScript in a web browser.

Add to gatsby-node.js

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    devtool: "eval-source-map"
  });
};

As mentioned in other thread: https://github.com/gatsbyjs/gatsby/issues/6877#issuecomment-410581050

This will add webpack-internal:// with src/ files where breakpoints work.