VSCode Debugger Extension for Typescript SDK doesnt work - cryptic message I cant understand

So for some context, here is my project structure

--- Rough Folder Structure ---
[src]
    ├── .env
    ├── .eslintrc.js
    ├── .huskyrc.js
    ├── .lintstagedrc.js
    ├── .prettierrc.js
    ├── [apiV1]
        ├── [batch]
            ├── batch.controller.ts
            ├── batch.model.ts
            ├── batch.route.ts
            └── batch.service.ts
        └── index.ts
    ├── [components]
        ├── [collectors]
            ├── base.ts
            ├── [verifyAddress]
                ├── collector.ts
                └── model.ts
            ├── [verifyName]
                ├── collector.ts
                └── model.ts
            └── [load_test_simulator]
                ├── collector.ts
                └── model.ts
        ├── components.ts
        ├── config.ts
        ├── [handlers]
            ├── batchHandler.ts
            ├── data.ts
            ├── dbHandler.ts
            └── fileHandler.ts
        └── interceptors.ts
    ├── [config]
        ├── app.config.ts
        ├── kafka_config.ts
        ├── secret.config.ts
        └── temporal.config.ts
    ├── [connection]
        ├── kafkaConn.ts
        ├── postgresConnection.ts
        ├── redisConnection.ts
        └── temporalConnection.ts
    ├── debug-replayer.ts
    ├── [dist]
    ├── [helpers]
        ├── constants.ts
        ├── enums.ts
        ├── errors.ts
        ├── http_client.ts
        ├── interface.ts
        └── logging.ts
    ├── index.ts
    ├── [middlewares]
        ├── logger.middleware.ts
        └── validate.middleware.ts
    ├── [node_modules]
    ├── package.json
    ├── tsconfig.json
    ├── [utils]
        ├── batchUtil.ts
        ├── component.ts
        ├── getErrors.ts
        ├── interceptors.ts
        ├── kafkaUtil.ts
        ├── logger.ts
        ├── mapper.ts
        ├── util.ts
        └── validator.ts
    ├── [validation]
        ├── [components]
            ├── base_request.ts
            └── sheet.ts
        ├── index.ts
        └── interface.ts
    ├── [workers]
        └── worker.ts
    ├── [workflows]
        ├── batch.workflow.ts // main file where all workflows are present
        └── workflow.ts //dummy file - its not being used
    └── yarn.lock

--- File Contents ---

As you can see my workflow definition function are inside the file -
src > workflows > batch.workflow.ts

Further, my debug-replayer.ts file is also present in src folder

When i run the temporal server and use run a workflow - I am unable to use the wf-id or the wf-history to run a replay with debug points in the Temporal Panel

Instead I am greeted with the following message in the Output tab of vscode terminal - inside the Debug Console -

Process exited with code 1
Uncaught Error Error: Cannot find module 'ts-node/register/transpile-only'
Require stack:
- internal/preload
    at <anonymous> (internal/modules/cjs/loader.js:902:15)
    at <anonymous> (internal/modules/cjs/loader.js:746:27)
    at <anonymous> (internal/modules/cjs/loader.js:974:19)
    at <anonymous> (internal/modules/cjs/loader.js:1244:12)
    at loadPreloadModules (internal/bootstrap/pre_execution.js:475:5)
    at prepareMainThreadExecution (internal/bootstrap/pre_execution.js:72:3)
    at <anonymous> (internal/main/run_main_module.js:7:1)

my package.json file is in - src folder it is as follows

{
    "name": "product-batch-service",
    "version": "0.1.0",
    "private": true,
    "scripts": {
      .......
    },
    "nodemonConfig": {
        "execMap": {
            "ts": "ts-node"
        },
        "ext": "ts",
        "watch": [
            "src"
        ]
    },
    "dependencies": {
       .....
    },
    "devDependencies": {
       ........
    }
}

my tsconfig.json is as follows

{
    "compilerOptions": {
        "experimentalDecorators": true,

        "target": "es6" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
        "module": "commonjs" /* Specify what module code is generated. */,

        "sourceMap": true /* Create source map files for emitted JavaScript files. */,
        "outDir": "./dist" /* Specify an output folder for all emitted files. */,

        "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,
        "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,

        /* Type Checking */
        "strict": false /* Enable all strict type-checking options. */,
        "strictNullChecks": false /* When type checking, take into account 'null' and 'undefined'. */,
        "skipLibCheck": true /* Skip type checking all .d.ts files. */
    }
}

I also noticed that the speaker of this video here on temporal channel faced a similar problem: https://youtu.be/S4Xrc70zoCc?t=1400

What am I doing wrong - how do I solve this

Try to install ts-node as a dev dependency in your project.

It appears it’s not getting loaded as intended from the extension’s node_modules, I think it may have to do with the fact that we install it as a dev dependency ourselves and it doesn’t get installed when you install the extension.

1 Like

We will release this fix soon and hopefully it will address your issuse: Make ts-node a normal dependency by bergundy · Pull Request #69 · temporalio/vscode-debugger-extension · GitHub

1 Like