Error: Ajv does not have a construction capability

Question

Error: Ajv does not have a construction capability

When attempting to initialize Ajv in my class using the new keyword, I encounter the following error:

TypeError: Ajv is not a constructor

Here's the code snippet:

import * as Ajv from "ajv";

    export class ValidateJsonService {
        validateJson(json, schema) {
            console.log(Ajv);
            let ajv = new Ajv({ allErrors: true });
            if (!ajv.validate(schema, json)) {
                throw new Error("JSON does not conform to schema: " + ajv.errorsText())
            }
        }
    }

Upon checking the console log, I found this:

https://i.sstatic.net/MfmEv.png

This implementation previously worked and aligns with how Ajv should be utilized. As per the Ajv documentation:

The fastest validation call:

var Ajv = require('ajv');
var ajv = new Ajv(); // options can be passed, e.g. {allErrors: true}
var validate = ajv.compile(schema);
var valid = validate(data);
if (!valid) console.log(validate.errors);

So, why am I encountering this error?

For reference, here's how the Ajv library is imported - systemjs.config.js:

(function (global) {
    System.config({
        paths: {
            // paths serve as alias
            'npm:': 'lib/js/'
        },
        // map tells the System loader where to look for things
        map: {
            app: 'app', 
            // angular bundles
            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
            // other libraries
            'rxjs': 'npm:rxjs',
            'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
            'angular2-google-maps/core': 'npm:angular2-google-maps/core/core.umd.js',
            'ajv': 'npm:ajv/dist/ajv.min.js',
            'primeng': 'npm:primeng'

javascript angular typescript systemjs ajv

Answer 1

Answer №1

After noticing that Ajv comes with a default function, I decided to update my code as follows:

let ajv = new Ajv.default({ allErrors: true });

Although I'm not completely certain about the details, it seems to be functioning correctly now.

Answer 2

After noticing that Ajv comes with a default function, I decided to update my code as follows:

let ajv = new Ajv.default({ allErrors: true });

Although I'm not completely certain about the details, it seems to be functioning correctly now.

Answer 3

Answer №2

This question and answer may be old, but I believe the accepted solution is not optimal and still leaves some questions unanswered. So, here's my take:

The issue at hand is that ajv uses export default or export = syntax, while you are importing using import * as, which brings in an object containing all exports from the ajv module, with the default export accessible via a property called default.

A cleaner way to import the default constructor function would be:

import Ajv from 'ajv';
const ajv = new Ajv(...);

instead of

import * as Ajv from 'ajv';
const ajv = new Ajv.default(...); // Note: `Ajv` is an object with _all_ exports from the ajv module

If you insist on using import *, then you could do it this way to make Ajv the constructor function instead of Ajv.default:

import * as AjvModule from 'ajv';
const {default: Ajv} = AjvModule;

When using require instead of import with a module that uses export default, it behaves like import * as Ajv, meaning you get an object with a default property.

The following methods are equivalent:

// Pre-ES6 require
const Ajv = require('ajv').default;
const ajv = new Ajv(...);

// Import default
import Ajv from 'ajv';
const ajv = new Ajv(...);

// Import entire module and use default property
import * as Ajv from 'ajv';
const ajv = new Ajv.default(...); // kind of messy

// Import entire module as AjvModule and assign constructor function to Ajv
import * as AjvModule from 'ajv';
const {default: Ajv} = AjvModule;
const ajv = new Ajv(...);

If you need to import the default export along with other exported members without resorting to import * as :

import Ajv, {EnumParams} from 'ajv';
const ajv = new Ajv(...);

In my opinion, the accepted solution has its flaws because if you're only interested in importing the ajv constructor function, it makes more sense to assign it to the Ajv variable rather than the object containing the constructor function as a property named default - and then creating instances with new Ajv.default syntax - which can look confusing.

Answer 4

This question and answer may be old, but I believe the accepted solution is not optimal and still leaves some questions unanswered. So, here's my take:

The issue at hand is that ajv uses export default or export = syntax, while you are importing using import * as, which brings in an object containing all exports from the ajv module, with the default export accessible via a property called default.

A cleaner way to import the default constructor function would be:

import Ajv from 'ajv';
const ajv = new Ajv(...);

instead of

import * as Ajv from 'ajv';
const ajv = new Ajv.default(...); // Note: `Ajv` is an object with _all_ exports from the ajv module

If you insist on using import *, then you could do it this way to make Ajv the constructor function instead of Ajv.default:

import * as AjvModule from 'ajv';
const {default: Ajv} = AjvModule;

When using require instead of import with a module that uses export default, it behaves like import * as Ajv, meaning you get an object with a default property.

The following methods are equivalent:

// Pre-ES6 require
const Ajv = require('ajv').default;
const ajv = new Ajv(...);

// Import default
import Ajv from 'ajv';
const ajv = new Ajv(...);

// Import entire module and use default property
import * as Ajv from 'ajv';
const ajv = new Ajv.default(...); // kind of messy

// Import entire module as AjvModule and assign constructor function to Ajv
import * as AjvModule from 'ajv';
const {default: Ajv} = AjvModule;
const ajv = new Ajv(...);

If you need to import the default export along with other exported members without resorting to import * as :

import Ajv, {EnumParams} from 'ajv';
const ajv = new Ajv(...);

In my opinion, the accepted solution has its flaws because if you're only interested in importing the ajv constructor function, it makes more sense to assign it to the Ajv variable rather than the object containing the constructor function as a property named default - and then creating instances with new Ajv.default syntax - which can look confusing.

Answer 5

Answer №3

When I was working on a project that targeted CommonJS using the following tsconfig and corresponding typescript:

{
    "module": "commonjs",
    "moduleResolution": "node",
}

import Validator from 'validator';

const validator = new Validator.default();

However, after updating the project, I encountered an issue where I could no longer use the code above. An error stating

Validator.default is not a constructor

kept popping up. Even trying new Validator() did not work, resulting in a similar typescript-only error. The solution to this problem involved some odd workaround (NOTE: intellisense still functions!):

{
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
}

import ValidatorDefault from 'validator';

const Validator = ValidatorDefault as unknown as typeof ValidatorDefault.default;
const validator = new Validator();

I hope this solution can assist others facing the same issue.

Answer 6

When I was working on a project that targeted CommonJS using the following tsconfig and corresponding typescript:

{
    "module": "commonjs",
    "moduleResolution": "node",
}

import Validator from 'validator';

const validator = new Validator.default();

However, after updating the project, I encountered an issue where I could no longer use the code above. An error stating

Validator.default is not a constructor

kept popping up. Even trying new Validator() did not work, resulting in a similar typescript-only error. The solution to this problem involved some odd workaround (NOTE: intellisense still functions!):

{
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
}

import ValidatorDefault from 'validator';

const Validator = ValidatorDefault as unknown as typeof ValidatorDefault.default;
const validator = new Validator();

I hope this solution can assist others facing the same issue.

Answer 7

Answer №4

All you need to do is install the ajv package by running "npm install ajv" This will take care of the avj is not a constructor problem for you

Answer 8

All you need to do is install the ajv package by running "npm install ajv" This will take care of the avj is not a constructor problem for you

Error: Ajv does not have a construction capability

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Utilizing lodash or underscore libraries, we can compare two objects and eliminate any duplicate entries

Accessing environment-based constants in TypeScript beyond the scope of Cypress.env()Is there a way to gain access to environment-specific constants

Disabling the view picker DIV in MS CRM may not be an available option

What is the best method for passing a JavaScript object to PHP using Ajax?

Finding the current week using date information from an array of objects in JavaScript

What is the process for indicating an option as "chosen" within Embedded JavaScript Templating (EJS)?

Utilizing vanilla JavaScript within a React.js component: A step-by-step guide

Struggling to display a collection of items in React

Is there a way to instantiate a new object within the same for loop without replacing the ones created in previous iterations?

Use regular expressions to split a number string based on the individual digit values

Error deploying to Heroku: Unable to obtain access

Ionic2: expanding menu options in the sidemenu

What is the best method to retrieve an Element using both its ID and value?

Issue with Durandal dialog repositioning failing to function

Show and hide the responsive menu with a single click

Performing simultaneous updates to multiple records using CAML/jQuery in Sharepoint (Batch updates)

Disabling eslint does not prevent errors from occurring for the unicorn/filename-case rule

The Javascript Keydown event seems to fire twice

Typescript encounters Duplicate error when method overloading is implemented

Accessing external data in Angular outside of a subscription method for an observable