"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.

score 0 · Answer 1 · answered Nov 04 '21 at 04:23

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

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

1 Answers1