ESM module import requires using .default property

[maikknebel]

The version of Ajv you are using:
v7.0.3

Operating system and node.js version
Win10, node 15.5.1

Package manager and its version
npm v6.14.10; yarn v1.22.5

Link to (or contents of) package.json

{
  "name": "ajv-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.mjs",
  "scripts": {
    "app": "node index.mjs"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "ajv": "^7.0.3"
  }
}

// file: index.mjs
import Ajv from 'ajv';

const ajvValidator = new Ajv();

Error messages

npm run app

> ajv-test@1.0.0 app C:\Users\maik\Projekte\ajv-test
> node index.mjs

file:///C:/Users/maik/Projekte/ajv-test/index.mjs:3
const ajvValidator = new Ajv();
                     ^

TypeError: Ajv is not a constructor
    at file:///C:/Users/maik/Projekte/ajv-test/index.mjs:3:22
    at ModuleJob.run (node:internal/modules/esm/module_job:152:23)
    at async Loader.import (node:internal/modules/esm/loader:166:24)
    at async Object.loadESM (node:internal/process/esm_loader:68:5)

The output of npm ls

ajv-test@1.0.0 C:\Users\M.Knebel\Projekte\ajv-test
`-- ajv@7.0.3
  +-- fast-deep-equal@3.1.3
  +-- json-schema-traverse@1.0.0
  +-- require-from-string@2.0.2
  `-- uri-js@4.4.0
    `-- punycode@2.1.1

When i downgrade to v6.x.x everything works fine. I also tried yarn for package installation, deleted node_modules and setup a new project to avoid conflicts from other code.

[epoberezkin]

It is not tested with .mjs...

It works if you use it like that:

// index.mjs
import Ajv from "ajv"
const ajv = new Ajv.default()

I thought that it would understand default exports, it probably needs some additional typescript setting to support import from .mjs

[epoberezkin]

possibly you need to recompile source to .mjs?

[maikknebel]

.mjs makes nodejs treat the file as ECMAScript-Module, and makes me able to use import / export syntax instead of require(), no need to compile npm-packages to be compatible. import syntax works with non module-packages.

Now that you write it, i checked the package and since in dist/ajv.js uses exports.default = Ajv;, it is exposing the Ajv-Class with the name 'default'. Is this intended?

After checking other installed npm packages in my projects, i see only default exports using module.exports = ... or export default .... The first is working with both import and require. Maybe this should be adapted to this package.

new Ajv.default() solves the problem, looks a bit wired/unfamilary but as long as it works.

The following code-change made it work for me with new Ajv();:

// file: node_modules/ajv/dist/ajv.js
...
exports.default = Ajv;
module.exports = Ajv; // i added this line

[noelleleigh]

I'm running into a similar issue using Rollup to bundle Ajv into a bundle for the browser.

package.json

{
  "name": "avj-test",
  "version": "1.0.0",
  "dependencies": {
    "ajv": "^7.0.3"
  },
  "devDependencies": {
    "@rollup/plugin-node-resolve": "^11.0.1",
    "rollup": "^2.36.1"
  }
}

rollup.config.js

import { nodeResolve } from "@rollup/plugin-node-resolve";

export default {
  input: 'src/index.js',
  output: {
    dir: 'output',
    format: 'iife',
  },
  plugins: [nodeResolve()],
};

src/index.js

import Ajv from "ajv"

const ajv = new Ajv()

Output

% npx rollup --config
src/index.js → output...
[!] Error: 'default' is not exported by node_modules/ajv/dist/ajv.js, imported by src/index.js
https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module
src/index.js (1:7)
1: import Ajv from "ajv"
          ^
2: 
3: const ajv = new Ajv()
Error: 'default' is not exported by node_modules/ajv/dist/ajv.js, imported by src/index.js
    at error (/Users/noelle/dev/avj-test/node_modules/rollup/dist/shared/rollup.js:5265:30)
    at Module.error (/Users/noelle/dev/avj-test/node_modules/rollup/dist/shared/rollup.js:9858:16)
    at handleMissingExport (/Users/noelle/dev/avj-test/node_modules/rollup/dist/shared/rollup.js:9747:28)
    at Module.traceVariable (/Users/noelle/dev/avj-test/node_modules/rollup/dist/shared/rollup.js:10251:24)
    at ModuleScope.findVariable (/Users/noelle/dev/avj-test/node_modules/rollup/dist/shared/rollup.js:8770:39)
    at Identifier$1.bind (/Users/noelle/dev/avj-test/node_modules/rollup/dist/shared/rollup.js:4138:40)
    at NewExpression.bind (/Users/noelle/dev/avj-test/node_modules/rollup/dist/shared/rollup.js:2868:23)
    at NewExpression.bind (/Users/noelle/dev/avj-test/node_modules/rollup/dist/shared/rollup.js:8035:15)
    at VariableDeclarator.bind (/Users/noelle/dev/avj-test/node_modules/rollup/dist/shared/rollup.js:2868:23)
    at VariableDeclaration.bind (/Users/noelle/dev/avj-test/node_modules/rollup/dist/shared/rollup.js:2864:31)

The issue is fixed with this change:

node_modules/ajv/dist/ajv.js

  exports.default = Ajv;
+ export default Ajv
  //# sourceMappingURL=ajv.js.map

[epoberezkin]

The problem with the below

module.exports = Ajv

is that you cannot export anything else from this module other than this thing.

So I won't be able to do in typescript something like import Ajv, {_} from "ajv"

The problem with this:

export default Ajv

is that I think it is not a valid JS outside of .mjs, plus it has to be compiled by typescript compiler, rather than just added.

I didn't figure out a better way to compile typescript in such a way that I can both have default export compatible with typescript and with require, and also be able to export other things from the same file - hence this compromise that allows above import in typescript but requires .default both with require and, as it turns out, with import from .mjs

There may be a better, more universal solution probably, in configuring typescript options in such way that at least a normal import (without .default) from .mjs works. Possibly .mjs file has to be compiled too, so the import from .mjs would prefer .mjs file.

Any ideas on how best to configure typescript (while still allowing the above imports and without using esModuleInterop setting) are welcome

[teppeis]

Unfortunately, TypeScript does not yet support Node.js native ESM.
In particular, default export with module="CommonJS" is incompatible.
It doesn't allow you to output .mjs, nor does it provide effective options.

One hacky workaround to support native ESM is to add module.exports = Ajv after export default class Ajv {}.

export default class Ajv extends AjvCore {
// ...
}

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

You will also need to move all exports to after the part where you added them.

This technique is used in some packages, such as got.
https://github.com/sindresorhus/got/blob/d0cd709fdd61d4e5762866309ede1b25cdbe8e60/source/index.ts#L128-L133
The output
https://npmfs.com/package/got/11.8.1/dist/source/index.js

[teppeis]

@epoberezkin
This is an example of a change.
teppeis@7e0a836

If necessary, the other core.ts, 2019.ts and jtd.ts need to be changed as well.
If you agree with this policy, I will send you a PR.

[epoberezkin]

@teppeis thank you - maybe not such a terrible idea...

So in this case all the extra bits will be added as properties of the constructor function, but probably no harm.

Also requirement to add .default require would go away (but would still work, so no backwards compatibility issue, can be probably released without waiting for v8).

It does look like the linked example is compiled in esModuleInterop mode, but it should work without it as well. I am not sure whether Object.defineProperty(exports, "__esModule", { value: true }); is needed - it looks like the referenced typescript bug is fixed now, so we probably don't need it?

[epoberezkin]

I would not bother fixing it in core.ts, I don't think anybody would import it directly, but the user facing classes can be updated indeed - PR would be great!