Debugging Typescript files opens a new window

Avatar
Tuatinigodard
Created

Hello,

I'm pretty new to js/ts and I tried to setup a standard project with a mocha/chai test but when the debugger reaches my breakpoint it opens a new window for debugging that is different from my original source file which essentially makes the whole process pretty painful to debug.

Below are some captures:

This is before I hit the "debug" button:

And this is after I hit it:

As you can see it opens a second ts file that is a bit different from my original file instead of just stopping on my original file.

This is my `tsconfig.json`:

{
  // https://github.com/TypeStrong/ts-node/issues/138#issuecomment-926322588
  "ts-node": {
    "transpileOnly": true,
    "require": [
      "typescript-transform-paths/register",
      "tsconfig-paths/register"
    ]
  },
  "compilerOptions": {
    "target": "es2020",
    "inlineSourceMap": true,
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "outDir": "dist",
    "declaration": true,
    "baseUrl": ".",
    "paths": {
      "@app/*": ["src/*"]
    },
    "plugins": [
      { "transform": "typescript-transform-paths" }
    ]
  },
  "include": ["./scripts", "./test", "./typechain", "./src"],
  "files": ["./hardhat.config.ts"]
}


Doing the same thing but with JS files is working perfectly. Any idea how I can fix this? Thanks.

Votes

0

Share

6 comments
Avatar
Tuatinigodard
Created

Here is a test project, you can execute this test directly from Webstorm with the same configuration as above to reproduce the issue.

 

My version of Webstorm is 2021.3.1 but the same issue happened in previous versions.

1
Avatar
Elena Pogorelova
Created

Thanks!

I've found out that this is the typescript-transform-paths plugin that breaks the sourcemaps

Debugging works fine if the line

"typescript-transform-paths/register",

is commented out:

"ts-node": {
   "transpileOnly": true,
   "require": [
    // "typescript-transform-paths/register",
     "tsconfig-paths/register"
   ]
 },

 

1
Avatar
Tuatinigodard
Created

Awesome! Indeed it's working now! I removed this dependency from my non-test project and everything is working as expected, I don't even remember what I needed this plugin for. Thanks!

1
Avatar
Elena Pogorelova
Created

The debugger can't map your original sources to the generated files, looks like a problem with sourcemaps

Could you check if changing

"inlineSourceMap": true,

to

"sourceMap": true,

makes things any better?

Also, what does your run configuration look like?

0
Avatar
Tuatinigodard
Created

It didn't change anything, unfortunately.

Here is my `package.json` configuration:

{
  "scripts": {
    "lint": "eslint",
    "lint-fix": "eslint --fix",
    "main": "ts-node src/index.ts",
    "test": "hardhat test",
    "greeter-deploy": "hardhat run --network ropsten scripts/greeter_deploy.ts",
    "interact": "hardhat run scripts/interact.ts"
  },
  "devDependencies": {
    "@nomiclabs/hardhat-ethers": "^2.0.4",
    "@nomiclabs/hardhat-etherscan": "^3.0.0",
    "@nomiclabs/hardhat-waffle": "^2.0.2",
    "@typechain/ethers-v5": "^9.0.0",
    "@typechain/hardhat": "^4.0.0",
    "@types/chai": "^4.3.0",
    "@types/mocha": "^9.1.0",
    "@types/node": "^17.0.13",
    "@typescript-eslint/eslint-plugin": "^5.10.1",
    "@typescript-eslint/parser": "^5.10.1",
    "@uniswap/v2-core": "^1.0.1",
    "@uniswap/v2-periphery": "1.1.0-beta.0",
    "chai": "^4.3.6",
    "dotenv": "^14.3.2",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-config-standard": "^16.0.3",
    "eslint-plugin-import": "^2.25.4",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-promise": "^4.3.1",
    "ethereum-waffle": "^3.4.0",
    "ethers": "^5.5.3",
    "hardhat": "^2.8.3",
    "hardhat-gas-reporter": "^1.0.7",
    "prettier": "^2.5.1",
    "prettier-plugin-solidity": "^1.0.0-beta.19",
    "solhint": "^3.3.6",
    "solidity-coverage": "^0.7.18",
    "ts-node": "^10.4.0",
    "tsconfig-paths": "^3.12.0",
    "ttypescript": "^1.5.13",
    "typechain": "^7.0.0",
    "typescript": "^4.5.5",
    "typescript-transform-paths": "^3.3.1"
  },
  "dependencies": {
    "@openzeppelin/contracts": "^4.4.2"
  }
}

And my configuration to run the test:

0
Avatar
Elena Pogorelova
Created

No clues unfortunately, I need a project to play with

Note that you don't need passing --require ts-node/register in Node options, having it in Extra mocha options: is enough

0

Please sign in to leave a comment.