[Bug report] - No typescript sourcemap for config.ts or any server files.

[NicolasThierion]

Bug report

I cannot get sourcemaps to debug my config.ts.

Description

With vuepress 1.x, I used to work around ine incompatiblity with typescipt using the following on top of my config.js

require('ts-node/regiser`)
const config = require('./config.ts');
module.exports = config;

This is not required anymore because vuepress-next comes with the new Vue CLI, that leverages esbuilder to compile typescript on the fly.
However, the options for esbuilder are hard-coded in vuepress-cli, and does not enable the sourcemaps.

Steps to reproduce

• Create a new project with vuepress next (2.0.0-beta.26)
• Create a simple config.ts file

export default {};

function debugMe() {
   debugger;
   console.log('hello from TS');
}

debugMe();

• debug config.ts with VSCode, using the following launch.json configuration:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Serve docs via YARN",
      "runtimeExecutable": "yarn",
      "runtimeArgs": ["docs:dev"]
    }
  ]
}

• Reproduction link / repo: (none)

Expected behavior

VSCode should stop on the debugMe function. Instead, it stops on the transpiled config.js that makes it much more difficult to debug.

As a workaround for now, I cancel the work done by vuepress-cli, unregister esbuilder, and use ts-node which works fine with sourcemaps:

// config.js
delete require.extensions['.ts'];
require('ts-node/register');
const { vuepressConfig } = require('./_config.ts');
module.exports = vuepressConfig;

Screenshots

Environment info

• Browser: N/A
• Output of vuepress info:

System:
    OS: Linux 5.4 Manjaro Linux
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 2.96 GB / 15.45 GB
    Shell: 5.1.8 - /bin/bash
  Binaries:
    Node: 14.17.5 - ~/.nvm/versions/node/v14.17.5/bin/node
    Yarn: 3.0.1 - ~/.npm-global/bin/yarn
    npm: 6.14.14 - ~/.nvm/versions/node/v14.17.5/bin/npm
  Utilities:
    Git: 2.33.0 - /usr/bin/git
  Browsers:
    Chrome: Not Found
    Firefox: 91.0.2
  npmPackages:
    @vuepress/bundler-vite: Not Found
    @vuepress/bundler-webpack:  2.0.0-beta.26 
    @vuepress/cli:  2.0.0-beta.26 
    @vuepress/client:  2.0.0-beta.26 
    @vuepress/core:  2.0.0-beta.26 
    @vuepress/markdown:  2.0.0-beta.25 
    @vuepress/plugin-active-header-links: ^1.8.2 => 1.8.2 (2.0.0-beta.26)
    @vuepress/plugin-back-to-top: ^1.8.2 => 1.8.2 (2.0.0-beta.26)
    @vuepress/plugin-container:  2.0.0-beta.26 
    @vuepress/plugin-debug: Not Found
    @vuepress/plugin-docsearch: Not Found
    @vuepress/plugin-git:  2.0.0-beta.26 
    @vuepress/plugin-google-analytics: Not Found
    @vuepress/plugin-medium-zoom:  2.0.0-beta.26 
    @vuepress/plugin-nprogress:  2.0.0-beta.26 
    @vuepress/plugin-palette:  2.0.0-beta.26 
    @vuepress/plugin-prismjs:  2.0.0-beta.26 
    @vuepress/plugin-pwa: Not Found
    @vuepress/plugin-pwa-popup: Not Found
    @vuepress/plugin-register-components: Not Found
    @vuepress/plugin-search: Not Found
    @vuepress/plugin-shiki: Not Found
    @vuepress/plugin-theme-data:  2.0.0-beta.26 
    @vuepress/plugin-toc: Not Found
    @vuepress/shared:  2.0.0-beta.25 
    @vuepress/theme-default:  2.0.0-beta.26 
    @vuepress/utils:  2.0.0-beta.25 
    vue:  3.2.16 
    vue-loader:  16.5.0 
    vue-router:  4.0.11 
    vuepress: ^2.0.0-beta.26 => 2.0.0-beta.26 
    vuepress-vite: Not Found

[meteorlxy]

Any suggestions for how to solve that?

[Hecatron]

I recently needed to debug content within the config.ts
since I'm working on creating my own code to generate the sidebar.
For anyone else wanting to know how to get things working

First install typescript and ts-node

yarn add -D typescript
yarn add -D ts-node

Next create a file called debug_config.js next to the config.ts file

// debug_config.js - Required for ts debugging
// https://github.com/vuepress/vuepress-next/issues/457
delete require.extensions['.ts'];
require('ts-node/register');
const vuepressConfig = require('./config.ts');
module.exports = vuepressConfig;

Within package.json add a scripts entry for debugging
Change "content" to the directory containing the markdown / .vuepress directory

"scripts": {
    "debug": "ts-node ./node_modules/vuepress/bin/vuepress.js --config content/.vuepress/debug_config.js dev content",
}

Under VSCode in the launch.json file create a launch config to startup vuepress using the debug entry

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch VuePress",
            "request": "launch",
            "runtimeArgs": ["debug"],
            "runtimeExecutable": "yarn",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "type": "pwa-node",
            "cwd": "${workspaceFolder}/vuepress"
        },
    ]
}

Last setup a tsconfig.json file
This one was just taken from - https://github.com/TypeStrong/ts-node#configuration
but seems to avoid issues with errors

{
  // This is an alias to @tsconfig/node12: https://github.com/tsconfig/bases
  "extends": "ts-node/node12/tsconfig.json",

  // Most ts-node options can be specified here using their programmatic names.
  "ts-node": {
    // It is faster to skip typechecking.
    // Remove if you want ts-node to do typechecking.
    "transpileOnly": true,

    "files": true,

    "compilerOptions": {
      // compilerOptions specified here will override those declared below,
      // but *only* in ts-node.  Useful if you want ts-node and tsc to use
      // different options with a single tsconfig.json.
    }
  },
  "compilerOptions": {
    // typescript options here
  }
}