WebStorm tsconfig.json appears to not update the correct files

Question

I am developing a node.js application using TypeScript.

I've created a TypeScript file in the root folder of my project. I run tsconfig and it appears to update the dist folder. However, when I run the app, I am getting an error indicating a function is not defined.

Here is where things get confusing: there seems to be older versions of the .js and .map files in my src folder in the same directories as my source files with the same names. This .js file seems to have an older version of the file missing the necessary functions (class methods), different from the current versions in my /dist folder.

At the end of the day, I am trying to run the debugger on the files in my /dist folder and set breakpoints over in my /src TypeScript files.

This is a sample of the file structure I am seeing in my /src folder (this js file is not current):

Here is a sample of the file structure of my /dist folder where the transpiled js code resides:

Also, here are the debugger settings for the web app (rest) portion of the project:

Finally, here is a sample of the tsconfig.json file:

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "ES5",
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "types": ["reflect-metadata"],
    "lib": ["ES6"],
    "sourceMap": true,
    "inlineSources": true,
    "pretty": true,
    "outDir": "./dist",
    "rootDir": "./src/",
    "noLib": false
  },
  "compileOnSave": true,
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules",
    "node_modules/@types"
  ]
}

1. I would like to understand what is wrong, causing it to read the wrong js files, instead of the ones in the /dist folder?

2. What can I do to fix this to point to the /dist folder. I thought the debugger settings I setup would do that, but this does not appear to be the case.

Update: I deleted the .js files that were generated in the src folder and they eventually returned back to the folder and once again, they were not current after making other changes. I am not sure what is generating these files; is it a setting in webstorm or is it in tsconig.json?

Something else doesn't look right. When I opened one of the files in the dist folder, I found the following code instead of JS code:

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
//# sourceMappingURL=group.js.map

This is not what I was expecting, as I was expecting to see the transpiled js code.

Answer 1

You are declaring src in your includes and in your rootDir, everything should be declared relative to rootDir, but in this case you likely don't need the includes or excludes since you're including everything in src anyway. The compileOnSave option is what is generating the files as you delete them because a watcher has been set up to do so. You're also mixing your target and lib javascript versions.

You do not need to explicitly exclude @types if you are using the types property already.

If types is specified, only packages listed will be included.

Here's a cleaned up config you can try

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "ES5",
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "types": ["reflect-metadata"],
    "lib": ["ES5"],
    "sourceMap": true,
    "inlineSources": true,
    "pretty": true,
    "outDir": "dist",
    "rootDir": "src",
    "noLib": false
  },
  "compileOnSave": false
}