vuepress / core

Vue-Powered Static Site Generator
https://vuepress.vuejs.org
MIT License
2.32k stars 922 forks source link

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

Closed NicolasThierion closed 2 years ago

NicolasThierion commented 3 years ago

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

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

debugMe();

- debug `config.ts` with VSCode, using the following `launch.json` configuration: 
```json
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Serve docs via YARN",
      "runtimeExecutable": "yarn",
      "runtimeArgs": ["docs:dev"]
    }
  ]
}

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

Screenshot

Environment 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 commented 3 years ago

Any suggestions for how to solve that?

Hecatron commented 2 years ago

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
  }
}