Update TypeScript recipe for ESM support #2593

novemberborn · 2020-10-03T15:47:43Z

@FallingSnow shared how to (experimentally) configure AVA and Node.js so that AVA can load TypeScript-based ESM files:

"ava": {
    "extensions": {
      "ts": "module"
    },
    "nonSemVerExperiments": {
      "configurableModuleFormat": true
    },
    "nodeArguments": [
      "--loader=ts-node/esm",
      "--experimental-specifier-resolution=node"
    ],
    "files": [
      "test/**/*.spec.ts"
    ]
}

It'd be great to add this to our TypeScript recipe.

thasmo · 2021-02-05T17:54:15Z

Update Somehow I missed to also declare --experimental-specifier-resolution=node which was the issue after all. Thanks!

Trying to run TypeScript tests with ESM support, but failed to do so with the configuration above, adapted to my setup.

export default {
    nonSemVerExperiments: {
        nextGenConfig: true,
        configurableModuleFormat: true,
    },
    nodeArguments: [
        '--loader=ts-node/esm',
        '--experimental-specifier-resolution=node',
    ],
    extensions: {
        ts: 'module',
    },
    require: [
        'ts-node/register/transpile-only',
    ],
    files: [
        'packages/*/test/**/*.ts',
    ],
}

I'm running it with Node 14 and TypeScript 4, which results in this errors:

➜ npm test

> test
> ava

⚠ Experiments are enabled. These are unsupported and may change or be removed at any time.

(node:13990) ExperimentalWarning: --experimental-loader is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
(node:13996) ExperimentalWarning: --experimental-loader is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
(node:13997) ExperimentalWarning: --experimental-loader is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
(node:14010) ExperimentalWarning: --experimental-loader is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
(node:14004) ExperimentalWarning: --experimental-loader is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
(node:14025) ExperimentalWarning: --experimental-loader is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
(node:14018) ExperimentalWarning: --experimental-loader is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
(node:14031) ExperimentalWarning: --experimental-loader is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
(node:14038) ExperimentalWarning: --experimental-loader is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)

  ✖ No tests found in packages/pack-cache/test/pack.ts
  ✖ No tests found in packages/pack-environment/test/pack.ts
  ✖ No tests found in packages/pack-watch/test/pack.ts
  ✖ No tests found in packages/pack-less/test/pack.ts
  ✖ No tests found in packages/core/test/packs/optimization.ts
  ✖ No tests found in packages/core/test/packmule.ts
  ✖ No tests found in packages/pack-log/test/pack.ts
  ✖ No tests found in packages/core/test/packs/base.ts
  ✖ No tests found in packages/core/test/packs/minification.ts

  ─

Uncaught exception in packages/pack-cache/test/pack.ts

Error: ERR_UNSUPPORTED_DIR_IMPORT /mnt/c/Users/thasmo/Projects/packmule.packmule/packages/pack-cache/src/ /mnt/c/Users/thasmo/Projects/packmule.packmule/packages/pack-cache/test/pack.ts

  › finalizeResolution (node_modules/ts-node/dist-raw/node-esm-resolve-implementation.js:370:17)
  › moduleResolve (node_modules/ts-node/dist-raw/node-esm-resolve-implementation.js:809:10)
  › Object.defaultResolve (node_modules/ts-node/dist-raw/node-esm-resolve-implementation.js:920:11)
  › node_modules/ts-node/src/esm.ts:55:38
  › Generator.next (<anonymous>)
  › node_modules/ts-node/dist/esm.js:8:71
  › __awaiter (node_modules/ts-node/dist/esm.js:4:12)
  › resolve (node_modules/ts-node/dist/esm.js:31:16)

mikob · 2021-06-09T00:09:47Z

This doesn't work with default exports for me.

e.g.

import Visitor from "@swc/core/Visitor.js";
console.log('Visitor', Visitor);

prints:
Visitor { default: [class Visitor] }

@swc/core/Visitor looks like this:

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
class Visitor { ... }
exports.default = Visitor;

novemberborn · 2021-06-09T07:43:49Z

@mikob that's a typical interoperability pattern to make CJS behave like ESM. However now that you're using actual ESM, it does not behave the way you expect. See https://nodejs.org/api/esm.html#esm_import_statements:

When importing CommonJS modules, the module.exports object is provided as the default export. Named exports may be available, provided by static analysis as a convenience for better ecosystem compatibility.

You might be able to import { default as Visitor } from … but default is a special member so that probably won't work.

mikob · 2021-06-12T00:48:04Z

You might be able to import { default as Visitor } from … but default is a special member so that probably won't work.

Tried that as well without success. In the end I reverted to using "esm" (https://github.com/standard-things/esm) in the "requires" property for ava.

novemberborn · 2021-06-13T14:04:54Z

That might paper over the cracks for now, yes. AVA 4 removes the special treatment for that package though.

fregante · 2021-09-13T08:41:17Z

Node 16.10 or later will break the ESM loader, not sure if this affects this recipe.

ESM support: soliciting feedback TypeStrong/ts-node#1007 (comment)

Akiyamka · 2021-11-24T12:30:24Z

At this moment ts-node/esm can't handle some edge-cases .
More stable alternative is esbuild-node-loader.
Es-build work in transpile only mode, but work much faster.

"ava": {
  "extensions": {
    "ts": "module"
  },
  "nodeArguments": [
    "--loader=esbuild-node-loader",
    "--experimental-specifier-resolution=node"
  ],
  "nonSemVerExperiments": {
    "configurableModuleFormat": true
  }
}

Cobertos · 2021-12-08T01:27:08Z

The above config is much better.

The default installation using ts-node/esm was very slow. I had to increase the timeout for my tests.

I was also getting very odd failures. I narrowed down a couple problem tests and found that ES6 features that were working previously (in js before migrating to TypeScript) were behaving differently. Awaiting an object that wasn't a Promise was giving unexpected values. for...of loops over a custom Iterable would always received undefined, but if I called .next() on them myself, they seemed to work just fine.

After switching to the above (esbuild-node-loader) all my tests passed and it was much faster

rrichardson · 2021-12-14T18:58:28Z

I created a small PR to update the typescript recipe per the above (I independently found the solution.. searching the issues here would have saved me some time :) )

#2910

mesqueeb · 2022-01-20T13:46:15Z

I'm getting:

✖ nonSemVerExperiments.configurableModuleFormat from undefined is not a supported experiment

novemberborn · 2022-01-20T14:35:19Z

@mesqueeb see #2945.

Grawl · 2022-07-08T08:31:05Z

just started to work with AVA, and I want to replace Jest with it on my regular Webpack project (with Quasar Framework under the hood).

I have a lot of .ts files written with import/export and a few tests using some of them.

No one guide helped me with setup because I have Typescript files written in ESM. I tried a few configs from issues here and from guides of AVA and @ava/typescript and each of them led me to a problem like "AVA cannot run ESM" or "cannot run ESM outside of a module" or "unknown extension: typescript".

But I do not want to compile tests before running, and I cannot add "type": "module" to my package.json because Webpack and other tools goes crazy with it.

Only one working solution it using esbuild like @Akiyamka offers. Here's my working config:

module.exports = {
	'extensions': {
		'ts': 'module',
	},
	'nodeArguments': [
		'--loader=esbuild-node-loader',
		'--experimental-specifier-resolution=node',
	],
}

Also I have to yarn add -D esbuild-node-loader but it's fast and safe I think.

plantain-00 · 2022-12-10T04:01:27Z

esbuild-node-loader is deprecated: https://github.com/antfu/esbuild-node-loader
I use tsx(https://github.com/esbuild-kit/tsx) instead and it works fine for me:

{
  "extensions": {
    "ts": "module"
  },
  "nodeArguments": [
    "--loader=tsx",
  ]
}

fregante · 2023-02-03T07:04:33Z

@novemberborn can you update the first post with @plantain-00’s and hide the outdated comments? Thankfully now the amount of config is reduced (tested on Node 18.13)

Or maybe this issue should be closed since https://github.com/avajs/ava/blob/main/docs/recipes/typescript.md seems to be up to date (although it uses ts-node)

novemberborn · 2023-02-06T20:33:38Z

Or maybe this issue should be closed since main/docs/recipes/typescript.md seems to be up to date (although it uses ts-node)

That works for me, though you're suggesting it's not ideal?

Sparticuz · 2023-02-08T21:46:35Z

~~ts-node seems to be unmaintained~~, @plantain-00's solution should probably be what should be on https://github.com/avajs/ava/blob/main/docs/recipes/typescript.md

Maybe including a link to this page would be helpful to determine which loader the user would want to use https://github.com/privatenumber/ts-runtime-comparison

edit: I was looking at the original repo, not typestrongs

MartynasZilinskas · 2023-03-13T20:31:45Z

@Sparticuz for the performance reasons tsx looks like a good option. But has no support for emitDecoratorMetadata. I think ts-node has only drawback, that is performance.

I agree that we should have a link for other possible loaders, so you could choose for a specific case.

ondreian · 2023-03-31T13:19:26Z

After several hours of head scratching and hair pulling trying to setup ava on a serverless project, the tsx example provided by @plantain-00 is the only loader that works correctly with Typescript setups that cannot use "type": "module".

This should probably be added to the documentation as the current boilerplate does not work at all and always seems to error with:

  Uncaught exception in test/api.spec.ts

  <project>/test/api.spec.ts:1
  import anyTest, {TestFn} from "ava"
  ^^^^^^

  SyntaxError: Cannot use import statement outside a module

novemberborn · 2023-04-10T14:58:41Z

This should probably be added to the documentation as the current boilerplate does not work at all

A PR would be welcome!

Personally I use https://github.com/avajs/typescript in my projects and compile TypeScript separately, which removes the dependency on various loaders and complications with the module systems.

Sparticuz · 2023-04-14T13:03:42Z

@novemberborn Does running ava on your compiled files affect coverage? I guess when I was compiling to cjs there were extra code paths that made it difficult to cover, but I'm not sure I've tried since switching to esm.

novemberborn · 2023-04-16T17:56:22Z

@Sparticuz https://github.com/bcoe/c8 does the trick.

LangLangBart · 2023-04-27T06:31:06Z

esbuild-node-loader is deprecated: https://github.com/antfu/esbuild-node-loader I use tsx(https://github.com/esbuild-kit/tsx) instead and it works fine for me:
{
  "extensions": {
    "ts": "module"
  },
  "nodeArguments": [
    "--loader=tsx",
  ]
}

The solution above worked for me up to nodejs/node version v19.9.0.

Starting with node v20.0.0 (18/Apr/23) there are a lot of errors.

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts"

The workaround was to tweak the package.json as follows and start ava with npm run ava:run.

Ref: TypeStrong/ts-node - #1997, thanks to @wibed

{
  "scripts": {
    "ava:run": "NODE_OPTIONS='--loader=tsx --no-warnings' ava"
  },
  "ava": {
    "extensions": {
      "ts": "module"
    }
  }
}

punkpeye · 2023-05-07T00:02:11Z

Note that in the above, setting nodeArguments: ['--loader=tsx'], does not work as a replacement for NODE_OPTIONS. You must start ava using NODE_OPTIONS just how @LangLangBart demonstrated.

* https://nodejs.org/en/blog/announcements/v20-release-announce * TypeStrong/ts-node#1997 * avajs/ava#2593 (comment)

Node 20 changed experimental loaders. Fix running tests on node 20: * https://nodejs.org/en/blog/announcements/v20-release-announce * TypeStrong/ts-node#1997 * avajs/ava#2593 (comment)

Per avajs/ava#2593 (comment)

See avajs/ava#2593 (comment) This fixes: ``` ./node_modules/.bin/ava (node:605416) ExperimentalWarning: Custom ESM Loaders is an experimental feature and might change at any time (Use `node --trace-warnings ...` to show where the warning was created) Uncaught exception in tests/session_test.ts TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for code/websites/cards/tests/session_test.ts ✘ tests/session_test.ts exited with a non-zero exit code: 1 ─ 1 uncaught exception ```

firxworx · 2024-03-25T17:42:50Z

I stumbled on this while searching about an issue with node + esm loading nothing to do with ava...

Above there is a good suggestion for workaround to set the environment: NODE_OPTIONS='--loader=tsx --no-warnings' (make sure you have tsx installed as a dev dependency!) -- #2593 (comment)

I wanted to add for the sake of anyone else who ends up here that --loader only works for earlier versions of Node 20 and for later versions like the current LTS you would need to use --import in its place: NODE_OPTIONS='--import=tsx --no-warnings'

novemberborn added help wanted scope:documentation scope:typescript labels Oct 3, 2020

fregante mentioned this issue Feb 20, 2021

TypeScript instructions don't work? #2693

Closed

This comment has been minimized.

Sign in to view

This comment was marked as outdated.

Sign in to view

fregante mentioned this issue Feb 20, 2021

Meta: Drop Rollup from tests refined-github/refined-github#4002

Merged

2 tasks

PsySecCorp mentioned this issue Apr 22, 2021

[Tutorial request] The extremely common and incredibly reasonable use-case of linting test files while excluding them from compilation typescript-eslint/typescript-eslint#3307

Closed

staff0rd mentioned this issue Nov 21, 2021

Test framework AnWeber/httpyac#117

Closed

Akiyamka mentioned this issue Nov 24, 2021

ESM support: soliciting feedback TypeStrong/ts-node#1007

Open

4 tasks

rrichardson mentioned this issue Dec 14, 2021

Mention experimental specifier resolution in TypeScript recipe #2910

Merged

chriszrc mentioned this issue Mar 18, 2022

Option to work with ESM (ES Module) only libraries like node-fetch bitjson/typescript-starter#269

Open

This comment was marked as outdated.

Sign in to view

novemberborn mentioned this issue Mar 1, 2023

Add t-node error handling section to TypeScript recipe #3172

Merged

tommy-mitchell mentioned this issue Mar 16, 2023

Move to ESM, remove index.d.ts requirement tsdjs/tsd#186

Open

6 tasks

ondreian mentioned this issue Apr 10, 2023

Update TypeScript recipe to remove ts-node recommendation #3192

Merged

MaybeJustJames added a commit to vibbits/phylio that referenced this issue May 8, 2023

Node 20 changed enperimental loaders. Fix running tests on node 20

70e2c0d

* https://nodejs.org/en/blog/announcements/v20-release-announce * TypeStrong/ts-node#1997 * avajs/ava#2593 (comment)

novemberborn closed this as completed in #3192 May 21, 2023

iambumblehead mentioned this issue Jul 11, 2023

invalid moduleId error when using tsx iambumblehead/esmock#209

Closed

tommy-mitchell added a commit to tommy-mitchell/listr-cli that referenced this issue Jul 17, 2023

fix(ava): use NODE_OPTIONS for Node.js 20

f3f7329

Per avajs/ava#2593 (comment)

This was referenced Jul 18, 2023

refactor!: convert to TypeScript, target Node.js 16 tommy-mitchell/listr-cli#7

Merged

Update TypeScript recipe for mocks, Node.js 20 #3225

Merged

Angelelz added a commit to Angelelz/drizzle-orm that referenced this issue Dec 11, 2023

[All] Possible tests fix see avajs/ava#2593 (comment)

193b17c

Angelelz mentioned this issue Dec 12, 2023

Fix ava tests drizzle-team/drizzle-orm#1635

Merged

avajs locked as resolved and limited conversation to collaborators Mar 31, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update TypeScript recipe for ESM support #2593

Update TypeScript recipe for ESM support #2593

novemberborn commented Oct 3, 2020

thasmo commented Feb 5, 2021 •

edited

Loading

This comment has been minimized.

This comment was marked as outdated.

mikob commented Jun 9, 2021

novemberborn commented Jun 9, 2021

mikob commented Jun 12, 2021

novemberborn commented Jun 13, 2021

fregante commented Sep 13, 2021

Akiyamka commented Nov 24, 2021

Cobertos commented Dec 8, 2021 •

edited

Loading

rrichardson commented Dec 14, 2021

mesqueeb commented Jan 20, 2022

novemberborn commented Jan 20, 2022

Grawl commented Jul 8, 2022 •

edited

Loading

This comment was marked as outdated.

plantain-00 commented Dec 10, 2022

fregante commented Feb 3, 2023 •

edited

Loading

novemberborn commented Feb 6, 2023

Sparticuz commented Feb 8, 2023 •

edited

Loading

MartynasZilinskas commented Mar 13, 2023 •

edited

Loading

ondreian commented Mar 31, 2023

novemberborn commented Apr 10, 2023

Sparticuz commented Apr 14, 2023

novemberborn commented Apr 16, 2023

LangLangBart commented Apr 27, 2023

punkpeye commented May 7, 2023

firxworx commented Mar 25, 2024

Update TypeScript recipe for ESM support #2593

Update TypeScript recipe for ESM support #2593

Comments

novemberborn commented Oct 3, 2020

thasmo commented Feb 5, 2021 • edited Loading

This comment has been minimized.

This comment was marked as outdated.

mikob commented Jun 9, 2021

novemberborn commented Jun 9, 2021

mikob commented Jun 12, 2021

novemberborn commented Jun 13, 2021

fregante commented Sep 13, 2021

Akiyamka commented Nov 24, 2021

Cobertos commented Dec 8, 2021 • edited Loading

rrichardson commented Dec 14, 2021

mesqueeb commented Jan 20, 2022

novemberborn commented Jan 20, 2022

Grawl commented Jul 8, 2022 • edited Loading

This comment was marked as outdated.

plantain-00 commented Dec 10, 2022

fregante commented Feb 3, 2023 • edited Loading

novemberborn commented Feb 6, 2023

Sparticuz commented Feb 8, 2023 • edited Loading

MartynasZilinskas commented Mar 13, 2023 • edited Loading

ondreian commented Mar 31, 2023

novemberborn commented Apr 10, 2023

Sparticuz commented Apr 14, 2023

novemberborn commented Apr 16, 2023

LangLangBart commented Apr 27, 2023

punkpeye commented May 7, 2023

firxworx commented Mar 25, 2024

thasmo commented Feb 5, 2021 •

edited

Loading

Cobertos commented Dec 8, 2021 •

edited

Loading

Grawl commented Jul 8, 2022 •

edited

Loading

fregante commented Feb 3, 2023 •

edited

Loading

Sparticuz commented Feb 8, 2023 •

edited

Loading

MartynasZilinskas commented Mar 13, 2023 •

edited

Loading