With `esm`: AVA 2 supports `type: module`, AVA 3 doesn't

[fregante]

I know that full ESM support is WIP (#2293) but I wanted to document this regression.

Error: ECMAScript Modules are not supported in this Node.js version.

This exact combination fails:

• Node 12.15 (12.16+ fails regardless)
• AVA 3.0+ (2.4- works)
• ava.require: esm
• type: module in the current package.json

I also tried dropping the internal supportsESM function but it fails regardless.

A live demo can be seen on vadimdemedes/dom-chef#56 (commits)

---

I also tried ava --experimental-modules (changing the require().default to import and dropping esm) but for some reason it says it's still a require. I probably don't want to get into that since a dependency isn't type: module either

[novemberborn]

Yea sorry about that. The .mjs extension can now only be used with proper ES modules, not the esm package.

[fregante]

I don’t have mjs files, but type: module

But fair enough

[novemberborn]

Right. On mobile, need to check what is supported and what isn’t.

[novemberborn]

@fregante I see. I'm not sure we can override how Node.js interprets type: module. #2345 proposes configuration for file extensions, so that would be the way to go, if we can somehow load these files as CJS.

[fregante]

There's nothing extra to be supported: the module is a real ES Module and should be loaded as an ES Module just like Node can.

This combination doesn't seem to be supported:

• AVA 3
• type:module
• JSX in tests

I think this issue should be reopened (but it should mention JSX/babel)

It'd be great to have a full recipe with those 3 ingredients.

[fregante]

This fails as soon as you:

1. rename to test.jsx
2. enable jsx in babel's config, no need for extra plugins

Here's a full repro that should work, repro.zip with:

package.json

{
  "main": "index.js",
  "type": "module",
  "scripts": {
    "test": "ava"
  },
  "dependencies": {
    "@ava/babel": "^1.0.1",
    "@babel/preset-react": "^7.9.4",
    "ava": "^3.5.1"
  },
  "ava": {
    "babel": {
      "testOptions": {
        "plugins": [
          "@babel/plugin-syntax-jsx",
          "@babel/plugin-transform-react-jsx"
        ]
      },
      "extensions": [
        "js",
        "jsx"
      ]
    }
  }
}

tests.jsx

import same from './index.js' // Only this line is enough to make it crash
import test from 'ava';

test('base', t => {
	t.throws(() => <br/>);
});

index.js

export default x => x;

Error

❯ ava


  ✖ No tests found in test.jsx

  1 uncaught exception

  Uncaught exception in test.jsx

  test.jsx:1

   1: import same from './index.js'
   2: import test from 'ava';      

  Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: ./index.js
  require() of ES modules is not supported.
  require() of ./index.js from ./test.jsx is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
  Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from ./package.json.

[novemberborn]

@fregante I did not notice you were using @ava/babel. Per avajs/babel#13 it cannot load ESM files. You can try running Babel outside of AVA and then using AVA's own ESM support.

[dimaqq]

[sorry if I don't understand the complexity here]
The issue is closed, yet the commentary seems to indicate that this circumstance is still unsupported:

• AVA 3
• type:module
• JSX in tests

There's a comment that this (or something) needs to be solved in avajs/babel, so should this issue remain open waiting for that instead?

[novemberborn]

@dimaqq if you're using JSX with our Babel provider, then yes avajs/babel#13 is the issue you're looking for.

In short, ESM only really works without on-the-fly compilers at this point. That's a general observation, nothing to do with AVA really.

[fregante]

In short, ESM only really works without on-the-fly compilers at this point.

I'm sure that in the easiest of setups (e.g. every file is a true ESM file + no external modules), some on-the-fly compilers will work, but:

• compilers likely mess with the imports, either changing them to require and breaking it, or viceversa
• bundlers are way more forgiving than Node’s ESM implementation, so they may be easier to set up (Meta: Fix tests to run (only) on newer Node versions refined-github/refined-github#3206)