"SyntaxError: Cannot use import statement outside a module" but tsconfig.json `module` already `commonjs`

Question

I am somewhat new to typescript, and I am working in a fork of someone else's existing repository, trying to run tests against it.

Summary

I have written a test script examples/test.ts and am attempting to debug it using the vscode debugger. When I run the script with ts-node./examples/test.ts , the script executes successfully. However, when I try to run it using the vscode debugger, I get the famous SyntaxError: Cannot use import statement outside a module . This error occurs on line 1 of my typescript test, where I first try to import {Foo} from '../dist' , where Foo is an object under test.

Attempted Fixes

I've been researching for a little while, the most common fix for this seems to be to set module to commonjs in the tsconfig.json compilerOptions . But, this project already has that set up correctly.

Another common fix is to set "type":"module" in package.json , but when I do that I cause new errors in the vscode debugger. Specifically, Uncaught TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for /path/truncated/by/me/examples/test.ts . The fact that I can run the script normally outside the debugger makes me think it's more likely to be tsconfig.json or similar configuration, of course I may be wrong.

Relevant config files:

.vscode/launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
        "type": "node",
        "request": "launch",
        "name": "Launch Program",
        "skipFiles": [
        "<node_internals>/**"
        ],
        "program": "${workspaceFolder}/examples/test.ts",
        "preLaunchTask": "tsc: build - tsconfig.json",
        "outFiles": [
        "${workspaceFolder}/dist/**/*.js"
        ]
        }
    ]
}

tsconfig.json

{
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"lib": ["es2015", "dom"],
"allowJs": true,
"skipLibCheck": true,
"sourceMap": true,
"outDir": "dist",
"strict": true,
"noImplicitAny": true,
"moduleResolution": "node",
"baseUrl": "./",
"esModuleInterop": true
},
"include": ["*"],
"exclude": ["node_modules"]
}

Versions

Running VSCode 1.52.1 on up-to-date macOS. ts-node --version gives v9.1.1 , and the project uses node --version of v12.14.1 .

Answer 1

I had the exact problem. Here's what finally worked for my cli project (using vscode 1.61.2).

launch.json:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Program",
      "program": "${workspaceFolder}/src/cli.ts",
      "request": "launch",
      "preLaunchTask": "npm: build",
      "skipFiles": ["<node_internals>/**"],
      "type": "pwa-node"
    }
  ]
}

tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2020" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
    "module": "commonjs" /* Specify what module code is generated. */,
    "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. */,
    "strict": true /* Enable all strict type-checking options. */,
    "skipLibCheck": true /* Skip type checking all .d.ts files. */,
    "outDir": "./lib",
    "importHelpers": false,
    "sourceMap": true
  }
}

package.json scripts section:

  "scripts": {
    "start": "node lib/cli.js",
    "build": "tsc"
  },

package.json devDependencies

  "devDependencies": {
    "@types/node": "^16.11.6",
    "typescript": "^4.4.4"
  },