TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" - ESM & TS

[Maxim-Mazurok]

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

Related to #4724

I'm trying to migrate to ESM, and Mocha gives me this error:

 > mocha

 TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for /home/maxim/google-api-typings-generator/tests/config.spec.ts
     at new NodeError (node:internal/errors:371:5)
     at Loader.defaultGetFormat [as _getFormat] (node:internal/modules/esm/get_format:71:15)
     at Loader.getFormat (node:internal/modules/esm/loader:105:42)
     at Loader.getModuleJob (node:internal/modules/esm/loader:243:31)
     at async Loader.import (node:internal/modules/esm/loader:177:17)
     at async importModuleDynamicallyWrapper (node:internal/vm/module:437:15)
     at async formattedImport (/home/maxim/google-api-typings-generator/node_modules/mocha/lib/esm-utils.js:7:14)
     at async Object.exports.requireOrImport (/home/maxim/google-api-typings-generator/node_modules/mocha/lib/esm-utils.js:48:32)
     at async Object.exports.loadFilesAsync (/home/maxim/google-api-typings-generator/node_modules/mocha/lib/esm-utils.js:88:20)
     at async singleRun (/home/maxim/google-api-typings-generator/node_modules/mocha/lib/cli/run-helpers.js:125:3)
     at async Object.exports.handler (/home/maxim/google-api-typings-generator/node_modules/mocha/lib/cli/run.js:374:5)

As can be seen from Maxim-Mazurok/google-api-typings-generator@cfa158a, I've added "require": ["ts-node/esm"] to .mocharc.json, using "module": "ES2020" in tsconfig.json and "type": "module" in package.json.

I've also tried node --loader ts-node/esm ./node_modules/mocha/bin/mocha --extension ts, which produces another error:

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension "" for /home/maxim/google-api-typings-generator/node_modules/mocha/bin/mocha
    at new NodeError (node:internal/errors:371:5)
    at defaultGetFormat (node:internal/modules/esm/get_format:71:15)
    at defer (/home/maxim/google-api-typings-generator/node_modules/ts-node/src/esm.ts:82:7)
    at /home/maxim/google-api-typings-generator/node_modules/ts-node/src/esm.ts:104:24
    at Generator.next (<anonymous>)
    at /home/maxim/google-api-typings-generator/node_modules/ts-node/dist/esm.js:8:71
    at new Promise (<anonymous>)
    at __awaiter (/home/maxim/google-api-typings-generator/node_modules/ts-node/dist/esm.js:4:12)
    at getFormat (/home/maxim/google-api-typings-generator/node_modules/ts-node/dist/esm.js:55:16)
    at Loader.getFormat (node:internal/modules/esm/loader:105:42) {
  code: 'ERR_UNKNOWN_FILE_EXTENSION'
}

Not sure how to solve this, and if Mocha + TS + ESM is even supposed to work. If it's supposed to work - would really appreciate any guidance, ideally reference to the working project.

Steps to Reproduce

See Readme of esm branch of the project for repro: https://github.com/Maxim-Mazurok/google-api-typings-generator/tree/esm (npm cit and observe)

Expected behavior: TS + ESM + Mocha works

Actual behavior: TS + ESM + Mocha results in an error

 > mocha

 TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for /home/maxim/google-api-typings-generator/tests/config.spec.ts
     at new NodeError (node:internal/errors:371:5)
     at Loader.defaultGetFormat [as _getFormat] (node:internal/modules/esm/get_format:71:15)
     at Loader.getFormat (node:internal/modules/esm/loader:105:42)
     at Loader.getModuleJob (node:internal/modules/esm/loader:243:31)
     at async Loader.import (node:internal/modules/esm/loader:177:17)
     at async importModuleDynamicallyWrapper (node:internal/vm/module:437:15)
     at async formattedImport (/home/maxim/google-api-typings-generator/node_modules/mocha/lib/esm-utils.js:7:14)
     at async Object.exports.requireOrImport (/home/maxim/google-api-typings-generator/node_modules/mocha/lib/esm-utils.js:48:32)
     at async Object.exports.loadFilesAsync (/home/maxim/google-api-typings-generator/node_modules/mocha/lib/esm-utils.js:88:20)
     at async singleRun (/home/maxim/google-api-typings-generator/node_modules/mocha/lib/cli/run-helpers.js:125:3)
     at async Object.exports.handler (/home/maxim/google-api-typings-generator/node_modules/mocha/lib/cli/run.js:374:5)

Reproduces how often: 100%

Versions

• The output of mocha --version and node node_modules/.bin/mocha --version: 9.1.0, 9.1.0
• The output of node --version: v16.7.0
• Your operating system
  • name and version: Ubuntu 20 in WSL on Windows 10
  • architecture (32 or 64-bit): 64
• Your shell (e.g., bash, zsh, PowerShell, cmd): bash
• Your browser and version (if running browser tests): N/A
• Any third-party Mocha-related modules (and their versions): N/A
• Any code transpiler (e.g., TypeScript, CoffeeScript, Babel) being used (and its version): TypeScript 4.3.5

Additional Information

[Maxim-Mazurok]

Also, I've tried to add file = file.replace(/\.ts$/, ".js"); in esm-util.js before return await import(url.pathToFileURL(file));, resulted in:

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/home/maxim/google-api-typings-generator/tests/config.spec.js' imported from /home/maxim/google-api-typings-generator/node_modules/mocha/lib/esm-utils.js
    at new NodeError (node:internal/errors:371:5)
    at finalizeResolution (node:internal/modules/esm/resolve:389:11)
    at moduleResolve (node:internal/modules/esm/resolve:867:10)
    at Loader.defaultResolve [as _resolve] (node:internal/modules/esm/resolve:978:11)
    at Loader.resolve (node:internal/modules/esm/loader:89:40)
    at Loader.getModuleJob (node:internal/modules/esm/loader:242:28)
    at Loader.import (node:internal/modules/esm/loader:177:28)
    at importModuleDynamically (node:internal/modules/cjs/loader:1041:29)
    at importModuleDynamicallyWrapper (node:internal/vm/module:437:21)
    at importModuleDynamically (node:vm:381:43)
    at exports.importModuleDynamicallyCallback (node:internal/process/esm_loader:30:14)
    at formattedImport (/home/maxim/google-api-typings-generator/node_modules/mocha/lib/esm-utils.js:8:31)
    at Object.exports.requireOrImport (/home/maxim/google-api-typings-generator/node_modules/mocha/lib/esm-utils.js:49:38)
    at Object.exports.loadFilesAsync (/home/maxim/google-api-typings-generator/node_modules/mocha/lib/esm-utils.js:89:34)
    at Mocha.loadFilesAsync (/home/maxim/google-api-typings-generator/node_modules/mocha/lib/mocha.js:469:19)
    at singleRun (/home/maxim/google-api-typings-generator/node_modules/mocha/lib/cli/run-helpers.js:125:15)
    at exports.runMocha (/home/maxim/google-api-typings-generator/node_modules/mocha/lib/cli/run-helpers.js:190:10)
    at Object.exports.handler (/home/maxim/google-api-typings-generator/node_modules/mocha/lib/cli/run.js:374:11)
    at /home/maxim/google-api-typings-generator/node_modules/yargs/build/index.cjs:443:71

[juergba]

Expected behavior: TS + ESM + Mocha works

--loader is a Node option and an alias of --experimental-loader. So experimental means experimental, and you shouldn't set your expectations too high.

node --loader ts-node/esm ./node_modules/mocha/bin/mocha --extension ts

Try instead:

• node ./node_modules/mocha/bin/mocha --loader=ts-node/esm --extension ts or
• node ./node_modules/mocha/bin/mocha -n loader=ts-node/esm --extension ts (in v9.1.0)

Or set loader in .mocharc.json

Edit: it's not "require": ["ts-node/esm"], but "loader": "ts-node/esm"

[Maxim-Mazurok]

Edit: it's not "require": ["ts-node/esm"], but "loader": "ts-node/esm"

This is what I was missing, setting "loader": "ts-node/esm" in .mocharc.json instead of "require" now works like a charm.

I've updated my esm branch in case if someone will need an example/reference: https://github.com/Maxim-Mazurok/google-api-typings-generator/tree/esm?rgh-link-date=2021-08-21T15%3A39%3A00Z
(Update: it Maxim-Mazurok/google-api-typings-generator#539 was merged)

Thank you!

[josh-hemphill]

Could the usage of "loader": "ts-node/esm" be added to the docs or the mocha typescript example, I just ran into this and had to go searching for issues after trying every other possible combination.
It sounds like the finalization of the new loader hook APIs won't be coming for a while, and didn't make it into the last Node LTS, so I think it would be work adding to the docs.

[juergba]

@josh-hemphill We have an example repo with an open issue on this topic.
There you can also find links to the ts-node repo with detailed information/discussions.

Just in case you are planning to contribute a typescript example to our example repo ...

[dcsan]

https://vitest.dev/guide/ just works.