Typescript source-maps "Cannot use import statement outside a module"

[ljobse]

The source map support doesn't seem to be working on a very basic typescript POC of mine.

• Tests are registered correctly
• Running/debugging does not work

Error

import { getUsers } from '../queries/getUsers.query';
^^^^^^
SyntaxError: Cannot use import statement outside a module

So I assume when running the test something is looking at the source ts

Info

• Running mocha with npm and sourcemaps works as expected: mocha --require source-map-support/register **/tests/**/*.tests.js
• Removing register source-map-support from the settings results in succeeding tests. ("mochaExplorer.require": "source-map-support/register")
  • Even the breakpoints are correctly translated.
  • The only things that doesn't work on this point is the code lens and the Show soruce code

tsconfig

{
  "compilerOptions": {
    "typeRoots": ["src/utils/definitions", "node_modules/@types"],
    "target": "ES2020",
    "module": "CommonJS",
    "moduleResolution": "Node",
    "outDir": "./build",
    "inlineSourceMap": true,
    "experimentalDecorators": true,
    "resolveJsonModule": true,
    "incremental": true,
    "tsBuildInfoFile": "./build/.cache/buildInfo.json",
    "lib": ["ES2020", "es6", "dom", "dom.iterable"],
    "assumeChangesOnlyAffectDirectDependencies": true,
    "esModuleInterop": true,
    "baseUrl": ".",
    "paths": {
      "*": ["./src/*"]
    }
  },
  "include": ["src/**/*.ts"],
  "exclude": ["node_modules", "build"]
}

settings.json

{
  "mochaExplorer.files": "**/tests/**/*.tests.js",
  "mochaExplorer.require": "source-map-support/register"
}

versions

• mocha: 8.2.0
• source-map-support: 0.5.18
• node: 15.0.1 (also tried with 14.15.0)

[hbenl]

That's weird. Do you have a project with which I could reproduce this?

[ljobse]

@hbenl https://github.com/ljobse/poc-boilerplate-api/tree/d76191434d1aa38a4ca58c0fcade9fff91136101 A test is located at /apps/users/tests

I switched to node 12 and now with requiring source map support it seems to have the same behavior as before without it where code lens and the Show source are pointing to the compiled code.

[ljobse]

@hbenl That's not expected behavior right? The explorer should resolve to the original TS files right? Or is that a feature that still can be added?

[hbenl]

Thanks for telling me how to reproduce this, I could not have figured it out otherwise. This seems to be an incompatibility between source-map-support and Mocha's experimental ESM loader, which is used by this extension by default. Add "mochaExplorer.esmLoader": false to your settings and the sourcemap support starts working. This is just a workaround, I'll have to look into why this is failing and what I can do about it. This kind of project should just work without obscure errors and workarounds.

[ljobse]

After adding this I have the same result. Did you try with the repo/commit I shared before? Tested with:

• Windows
• Node 12.18, 14.15, 15.0.1, 15.2.0

[hbenl]

Sorry, I had made another change and it turns out that is what fixed it: in .mocharc.json I changed "ui": "tdd" to "ui": "bdd". I don't know why I thought it was the esmLoader setting, you can remove that.

[ljobse]

Awesome, that did it! Thanks a lot.

Why does that impact the source maps?

[hbenl]

Why does that impact the source maps?

The location detection works by patching Mocha's ui methods (describe/it for bdd, suite/test for tdd) and if the wrong methods get patched, it won't work. It will then use a fallback mechanism for location detection which doesn't support sourcemaps.