TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" after upgrade to 9.0.3

[buesing]

Prerequisites

• Checked that your issue hasn't already been filed by cross-referencing issues with the faq label
• Checked next-gen ES issues and syntax problems by using the same environment and/or transpiler configuration without Mocha to ensure it isn't just a feature that actually isn't supported in the environment in question or a bug in your code.
• 'Smoke tested' the code to be tested by running it outside the real test suite to get a better sense of whether the problem is in the code under test, your usage of Mocha, or Mocha itself
• Ensured that there is no discrepancy between the locally and globally installed versions of Mocha. You can find them with: node node_modules/.bin/mocha --version(Local) and mocha --version(Global). We recommend that you not install Mocha globally.

Description

I just tried upgrading to 9.0.3 and i'm getting a TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts".
Running (obviously) on typescript, with the command
TS_NODE_PROJECT='./tsconfig.test.json' mocha -r ts-node/register -r tsconfig-paths/register 'src/**/*.test.ts'.
This is my tsconfig.test.json:

{
  "compilerOptions": {
    "moduleResolution": "node",
    "target": "es5",
    "module": "commonjs",
    "lib": ["es2015", "es2016", "es2017", "esnext", "dom"],
    "strict": true,
    "sourceMap": true,
    "declaration": false,
    "strictNullChecks": false,
    "allowSyntheticDefaultImports": true,
    "noImplicitAny": false,
    "resolveJsonModule": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "esModuleInterop": true,
    "baseUrl": "src",
    "paths": {
      "@pages/*": ["pages/*"],
      "@components/*": ["components/*"],
    },
    "typeRoots": ["node_modules/@types"]
  },
  "include": ["src"]
}

This used to work in 9.0.1

Steps to Reproduce

Run above code with the configuration on a .ts file using ES modules.

Expected behavior: The file is being loaded and executed

Actual behavior: An error is thrown
TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts".

Reproduces how often: 100%

Versions

• The output of mocha --version and node node_modules/.bin/mocha --version: 9.0.2
• The output of node --version: v14.16.1
• Your operating system
  • name and version: MacOS
  • architecture (32 or 64-bit): 64bit
• Your shell (e.g., bash, zsh, PowerShell, cmd): zsh

[juergba]

@buesing I have my doubts on this issue ... it works on v9.0.1, doesn't work on v9.0.2. But who knows.

Without any sample to reproduce I'm going to close this issue within the next few days. I like closing issues.

[buesing]

@juergba everybody likes closing issues 😄
I'm gonna see if i can provide an example later.

[buesing]

So, first off, you are right, it's probably not a mocha issue. The thing that changed between version 9.0.2 and 9.0.3 is the error message.
Using mocha@9.0.2:

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /Users/moriz/dev/mocha-repro/node_modules/@sindresorhus/slugify/index.js
require() of ES modules is not supported.

Using mocha@9.0.3:

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for /Users/moriz/dev/mocha-repro/src/utils/getImageFileName/index.test.ts

This is why I wrongly thought this was an issue with mocha. I assume that the underlying issue is the same, namely that the library I'm requiring here @sindresorhus/slugify has changed it's implementation to pure ESM in the latest version (I did both updates at the same time). I've been investigating this problem without a solution so far, so if you have any pointers I'm grateful. Here is a minimal test reproduction repo:
https://github.com/buesing/mocha-repro
Steps to reproduce:

1. Clone repo
2. npm i
3. npm run test
   (running node version 14).
   I realize this problem (how to handle es modules with mocha) has been discussed at length in various threads, so feel free to close. I just haven't found a setup that works for me in this case.

[juergba]

@buesing Yes, with this topic you are stumbling into an experimental minefield. You will have to spend considerable amount of time to get into it, or to get out again. I can give you some tipps, then I will kindly lead you to the exit.

• esm package: hasn't been updated for over two years (=abandonded) and is not supported in Mocha v9. Mocha supports Node's native ESM support.
• sindresorhus guide: to read
• I recommend option 3) and pin @sindresorhus/slugify: ^1.1.0 (version before pur ESM)
• otherwise --loader=ts-node/esm: see this guide. --loader is an experimental Node option (alias of --experimental-loader) and ts-node/esm is experimental loader hook.
• sindresorhus guide:
  Can I import ESM packages in my TypeScript project? => yes, but you need to convert your project to output ESM.
  Your target is ES5. Why?
• sindresorhus guide:
  • Use only full relative file paths for imports
  • You must use a .js extension in relative imports even though you're importing .ts files

Edit: or don't update to Mocha v9, stay on v8.

[buesing]

Yeah, I'm sticking with version 1.1.0 of the slugify package for now. Thanks!