Tips for implementing accurate structure on CloudFrontWebDistribution class

I seem to be facing an issue while trying to create a new instance of the CloudFrontWebDistribution using aws-cdk v1.7. The compiler is showing some dissatisfaction with the construct I provided.

import { Stack, StackProps, Construct, App } from '@aws-cdk/core';
import { CloudFrontWebDistribution } from '@aws-cdk/aws-cloudfront';

export class MyCloudFrontStack extends Stack {

    constructor(scope: Construct, id: string, CloudFrontStackParameters, props?: StackProps) {
        super(scope, id, props);

        const env = parameters.environment.toLowerCase();
        const webDistributionConfigs = { // configurations here... };
        this.cloudFrontWebDistrubtion = new CloudFrontWebDistribution(scope, id, webDistributionConfigs); // encountering typescript errors related to the scope variable
    }
}

The TypeScript compiler is specifically pointing out a problem with the scope variable that's being passed into the constructor of CloudFrontWebDistribution.

Argument of type 'import("c:/Users/me/node_modules/@aws-cdk/core/lib/construct").Construct' is not assignable to parameter of type 'import("c:/Users/me/node_modules/@aws-cdk/aws-lambda/node_modules/@aws-cdk/core/lib/construct").Construct'. Types of property 'node' are incompatible. Property '_defaultChild' is missing in type 'import("c:/Users/me/node_modules/@aws-cdk/core/lib/construct").ConstructNode' but required in type 'import("c:/Users/me/node_modules/@aws-cdk/aws-lambda/node_modules/@aws-cdk/core/lib/construct").ConstructNode'.ts(2345) construct.d.ts(61, 13): '_defaultChild' is declared here.

Could it be a misuse of types on my end? Any suggestions on where I might have gone wrong?

typescriptamazon-web-servicesaws-sdkamazon-cloudfrontaws-cdk

Answer №1

To resolve the issue, I implemented the following solution:

import { Stack, StackProps, Construct, App } from '@aws-cdk/core';
import { CloudFrontWebDistribution } from '@aws-cdk/aws-cloudfront';

export class MyCloudFrontStack extends Stack {

    constructor(scope: Construct, id: string, CloudFrontStackParameters, props?: StackProps) {
        super(scope, id, props);

        const env = parameters.environment.toLowerCase();
        const webDistributionConfigs = { // configurations here... };
        this.cloudFrontWebDistrubtion = new CloudFrontWebDistribution(this, id, webDistributionConfigs); 
    }
}

The crucial step is to utilize the this keyword and provide it as the first argument in the 

new CloudFrontWebDistribution(...)
constructor. By doing so, the CDK understands that it should create the CloudFront web distribution for the current stack (MyCloudFrontStack) exclusively, rather than for the parent stack (represented by the scope variable).

Furthermore, explicitly specifying dependencies in the package.json file and ensuring they are all on the same version can help prevent any potential conflicts due to package versions mismatch.

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

Navigating through Expo with Router v3 tabs, incorporating stack navigation, search functionality, and showcasing prominent titles

I've been working on designing a navigation header similar to the Apple Contacts app, with a large title and search function, but only for the Home Screen. All other tabs should have their own unique settings, like different titles or hidden navigatio ...

iostypescriptreact-nativeexporeact-navigation

Enhancing a Given Interface with TypeScript Generics

I am looking to implement generics in an Angular service so that users can input an array of any interface/class/type they desire, with the stipulation that the type must extend an interface provided by the service. It may sound complex, but here's a ...

angulartypescriptrxjs

Error: Could not find module: Unable to locate 'rxjs/add/observable/throw' in 'D:AngularhttpErrorHandlingExamplesrcapp'

I'm working on an Angular project to practice error handling, but I encountered an issue when trying to import the 'throw' module. The error message reads as follows: Error Message: "ERROR in ./src/app/employee.service.ts Module not found: E ...

angulartypescriptrxjs

Create a unique custom design for your Mapbox GL control

When developing the website, we utilized Angular 8, Typescript, and SCSS. We are using mgl-map to display a map, and I wanted to create a custom control for it with unique styles. I added the custom control to the map using: const centerOnCoordinatesC ...

cssangulartypescriptsassmapbox-gl

What are the steps to create a dynamic navigation menu in Angular 2?

I have successfully implemented this design using vanilla CSS and JS, but I am encountering challenges when trying to replicate it in Angular 2. Setting aside routing concerns, here is the current state of my component: navbar.component.ts import { Comp ...

cssangulartypescript

The issue with the antd Input component's onChange event not updating state correctly when using a list fetched from an axios get request in a React

Recently delving into React, I've dedicated the past week to honing my skills. My current project involves creating a straightforward application featuring a 'product create' form alongside a product list equipped with a search bar (utilizin ...

reactjstypescriptreact-hooksaxiosantd

Having trouble extracting parameters with TypeScript in React Router even when they are present

I am in the process of migrating an older project to utilize react and react-router. Additionally, I am fairly new to typescript, which is the language used for this particular project. Any guidance or explanations on these topics would be highly beneficia ...

typescriptreact-router

Error message displaying Angular Service not able to be injected into component: StaticInjectorError in AppModule

I'm currently attempting to inject a SpotifyService service into a SearchComponent component, where the service requires Http as a parameter. Below is my module setup: @NgModule({ imports: [ BrowserModule, FormsModule, RouterModule ], decla ...

angulartypescript

Using Typescript to deliver the parent component's props to its children prop

I have a goal to create a versatile component that can accept different props based on its usage in the project. The component should output its children prop along with all the given props (flow-through) and potentially some new constants calculated based ...

reactjstypescripttypescript-generics

Rule in Eslint for Typescript that enforces explicit typing and prohibits the use of implicit "any

Starting a fresh typescript project with eslint, I'm facing an issue in setting up eslint rules for the tsc command to run smoothly without errors. Specifically, I'm encountering difficulty with the "noImplicitAny" rule defined in tsconfig.json, ...

typescripteslint

Having Trouble Setting Default Value in React Typescript MUI Autocomplete

I am encountering an issue with my React and Typescript code using MUI with the use of hook form. The problem arises when trying to set a default value for an Autocomplete field, resulting in the following error message: I am seeking assistance in resolvi ...

reactjstypescriptreact-hooksmaterial-ui

The use of the .reset() function in typescript to clear form data may lead to unexpected

I've been trying to use document.getelementbyID().reset(); to reset form values, but I keep running into an error in TypeScript. Property 'reset' does not exist on type 'HTMLElement'. Here's how I implemented it: const resetB ...

reactjstypescriptnext.js

Experience the power of React TypeScript where functions are passed as props, but access is restricted

Currently, I am working on creating a toggle button using react and typescript. In order to challenge myself, I have decided to pass a function as a prop to a child component to implement a complex feature. From what I remember, utilizing 'this.props& ...

reactjstypescript

Retrieve the previous route in Angular 7

I have developed a unique service that allows me to store route changes efficiently. import { Injectable } from '@angular/core'; import { Router, NavigationEnd } from '@angular/router'; @Injectable() export class RouteState { priva ...

angulartypescriptangular7

Is it possible to dynamically retrieve an element's style from @ViewChild in an Angular 2 component without needing an active approach?

For instance, there's an element in the template that uses a local variable #targetElement to retrieve its current width whenever needed. However, I prefer not to calculate the style programmatically. I attempted using a setter with the @ViewChild ann ...

javascriptangulartypescriptangular2-changedetection

typescript - specifying the default value for a new class instance

Is there a way to set default values for properties in TypeScript? For example, let's say we have the following class: class Person { name: string age: number constructor(name, age){ this.name = name this.age = age } } We want to ens ...

typescriptsyntax

The promise is unexpectedly fulfilled ahead of schedule without returning the expected value from an AXIOS call

My current challenge involves making a request to a service that rapidly generates multiple strings. The problem lies in returning a promise from this service, as I lack control over the string-generation process. It is crucial for me to return a promise ...

javascriptnode.jstypescriptpromiseaxios

Updating the page dynamically in React/Redux by making API calls based on user submissions

My current task involves calling an API with Redux, triggering the call based on a form submission. If the query is empty, it should return all lists; otherwise, it should only return lists that match the query. // List.tsx import React, { useEffect, useS ...

reactjstypescriptredux

The 'push' property is not found within the 'Control' type

I am attempting to create an array that contains arrays within it. This array is intended for a dynamic form functionality, where the user can add a new section and push the array of control fields to the main array. Angular2 then generates this dynamical ...

arraysangulartypescript

Apply criteria to an array based on multiple attribute conditions

Given an array containing parent-child relationships and their corresponding expenses, the task is to filter the list based on parents that have a mix of positive and negative expenses across their children. Parents with only positive or negative child exp ...

javascripttypescriptloopsfilterecmascript-6