You are unable to call the Class constructor Construct without using the 'new' keyword - AWS CDK

I have a custom NPM library that is designed to be utilized in various CDK applications and AWS accounts.

export class FrontendConstruct extends Construct {
  constructor(parent: Construct, id: string, props: FrontendConstructProps) {
    super(parent, id);

//create s3 bucket, cloudfront CDN, etc.

Below is an example of how I'm using this library within my CDK app:

import * as ssFE from '@customnpmlibrary/cdk-ss-fe'

export interface stFrontendStackProps extends cdk.StackProps {
  /**
   * The domain name for the site
   */
  readonly domainName: string;
  /**
 * Source location of the frontend code to deploy
 */
  readonly deploymentSource: string;
}

export class stFrontendStack extends cdk.Stack {
  constructor(scope: cdk.Construct, id: string, props: stFrontendStackProps) {
    super(scope, id,props);

    new ssFE.FrontendConstruct 
      (this, 'stfeStack', {
      domainname: props.domainName,
      deploymentSource: props.deploymentSource
    });
  
  }
}

When configuring the app:

import { stFrontendStack } from '../lib/st-frontend-stack';

const app = new cdk.App();

new stFrontendStack(app, 'stFrontend-DEV', {
  env: {
    account: '1234',
    region: 'us-east-1'
  },
  domainName: 'url.url.com',
  deploymentSource:'../dist/stfe'
});

However, when attempting to deploy, I encounter the following error during cdk synth:

Class constructor Construct cannot be invoked without 'new'

Any suggestions or assistance would be greatly appreciated.

Answer №1

The issue lies in the ECMAScript version being used. To resolve this, consider updating your tsconfig.json file to specify ES2018 like so:

{
  "compilerOptions": {
    "target":"ES2018",
    "module": "commonjs",
    "lib": ["es2018"],
    ... any other options ...
  }
}

Additionally, there was a problem encountered while running tsc with certain parameters. Double check that tsc is correctly reading the tsconfig.json file. For me, removing the parameters from tsc resolved the issue.

Answer №2

I have found that this issue arises when my dependencies are outdated. One solution I often use is deleting my node_modules/ directory (rm -rf node_modules) and then running npm install again.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Merge effects into a single NgRx store

I am trying to merge similar effects into one, but I'm not sure how to do it. Below are the effects I have (I need to pass different id depending on the action type): setTopics$ = createEffect( () => this.actions$.pipe( ofType(setTopics), ...

Tips for clearing object values without deleting the keys: Resetting the values of an object and its

Upon creating a service to share data among multiple components, it became necessary to reset the object values once the process was complete. To achieve this, I attempted the following: this.UserDetails = {}; This successfully cleared the values and remov ...

Issue with Angular 6: Struggling to Implement DatePipe

I am trying to set the current date within a formGroup in a specific format, but I keep encountering an error with the code below: 'Unable to convert "13/07/2020" into a date' for pipe 'DatePipe' this.fb.group({ startdateActivi ...

Streamlining all icons to a single downward rotation

I am currently managing a large table of "auditpoints", some of which are designated as "automated". When an auditpoint is automated, it is marked with a gear icon in the row. However, each row also receives two other icons: a pencil and a toggle button. W ...

Develop a customized configuration module for managing ESLint, Prettier, and resolving import issues efficiently

Currently, I am developing a configuration npm module for my personal project. This repository includes Prettier, ESLint, tsconfig, and other tools that I have set up. You can find my configuration tools repository here: https://github.com/Seyrinian/seyri ...

Is it possible to utilize a component's property as an argument for a method in Angular 6?

Within my Angular 6 application, I have a method designed to alter a property of my component. The scenario is as follows: ... value: number = 10; changeValue(v) { return v = 100; } ... Upon invoking this method with the component's property: this. ...

The utilization of TypeScript featuring a variable that goes by two different names

As I dive into TypeScript code, coming from a Java background, I struggle to grasp the syntax used in this particular example. The snippet of code in question is extracted from the initial Material UI Select sample: const [labelWidth, setLabelWidth] = Rea ...

Having trouble retrieving the return value from an Angular HTTP POST request?

My current project involves developing an Angular frontend that will handle multiple HTTP POST requests. The data is sent to the backend, which then responds with a confirmation. While the first part of the process is working smoothly, I'm encounterin ...

A TypeScript type that is either a string or number, but never simply a string alone

I am attempting to create a type that can be either string | number or just number, but never solely string. I made an attempt below, but it seems like the string | number case is reduced to just number. Is there a way to achieve this without such reductio ...

Tips for accessing the return value from a method outside of its containing function

Having recently started using Angular, I'm encountering an issue with retrieving a return value from a function that I have implemented within another one. private validateKeyterm(): boolean { const val = this.form.value.term; if ...

Error: Unable to Locate Module (Typescript with baseUrl Configuration)

Struggling to implement custom paths in my TypeScript project, I keep encountering the "webpackMissingModule" error due to webpack not recognizing my modules. I've attempted various solutions without any success. Any suggestions or ideas? Some packa ...

Oops! The system encountered a problem: the property 'modalStack' is not recognized on the type 'NgxSmartModalService'. Maybe you meant to use '_modalStack' instead?

Currently, I'm facing an issue while attempting to run ng build --prod in my Angular 6 project. I have also incorporated the NgxSmartModal package for handling modals. Unfortunately, the build process is failing and I can't seem to figure out why ...

The data type 'string' cannot be assigned to the data type 'undefined'

These are the different types available: export type ButtonProperties = { style?: 'normal' | 'flat' | 'primary'; negative?: boolean; size?: 'small' | 'big'; spinner?: boolean; } export type ...

Implementing an automatic logout feature based on the expiration timestamp of a JWT token

My goal is to have the application automatically log out based on an expiry token. Angular Client Code: login(credentials) { return this.http.post('http://something/api/login/', credentials) .map(response => { let res ...

Expanding a Typescript class with a new method through its prototype

https://i.sstatic.net/3hIOo.png I'm encountering an issue while attempting to add a method to my Typescript class using prototype. Visual Studio is giving me a warning that the function does not exist in the target type. I came across some informati ...

Angular - struggling to properly sort incoming data based on property with getter and setter functions

Within my application, there exists an array of objects containing a boolean property that is subject to change. Whenever this property changes, I use the .next(changedData) method to emit the updated array to the component that is subscribed. The compone ...

Guide to implementing translation in utility functions in Vue3

Utilizing translations with vue-i18n in my Vue application has been a smooth process (). My main.ts setup appears as follows: // Setting up the Vue app const app = createApp(App) // Incorporating necessary plugins app.use(i18n) .... // Mounting the Vue a ...

NextAuth - Error: The property 'accessToken' is not found in the 'Session' type

I'm encountering a problem when trying to deploy my application. Building it on my local machine works fine, but the build on GitHub is causing issues. Just so you know, I am using yarn and yarn build for this project. After doing some research, it ...

Angular ngModel failing to accurately reflect changes in input value

I am facing an issue with implementing a smart number input component that can toggle between allowing or disallowing negative numbers. I have an event listener for the (input) on the <input> element, triggering a function that applies various regex ...

The declaration file for the module 'vue-html-to-paper' was not located

Struggling to make a sample project work with HTML to PDF, but encountering an error message stating: Could not find a declaration file for module 'vue-html-to-paper' Even though it resides in my node_modules index.js import Vue from 'vue& ...