The issue TS2339 occurs when attempting to use the 'push' property on type 'IResolvable | SecurityGroupEgress[]', but it does not exist. This error is specifically related to the inability to use the 'push' property on type 'IResolvable'

I am currently in the process of updating my terraform configuration to newer versions. Unfortunately, we have encountered compatibility issues with our existing library that was built on older versions. In my setup, I'm importing the following:

import { SecurityGroup, SecurityGroupConfig, SecurityGroupIngress, SecurityGroupEgress } from "@cdktf/provider-aws/lib/security-group"

and then adding the ingressInput to the normalize rule array below.

_normalize_rule(rule: SecurityGroupIngress | SecurityGroupEgress) {
    defaults(rule, {
      description: "security group",
      ipv6CidrBlocks: [],
      prefixListIds: [],
      securityGroups: [],
      selfAttribute: false,
      cidrBlocks: []
    })
    return rule
  }
  
  add_ingress(config: SecurityGroupIngress) {
    this.ingressInput?.push(this._normalize_rule(config))
  }

Upon compiling the TypeScript file into JavaScript, I encountered the following error message:

error TS2339: Property 'push' does not exist on type 'IResolvable | SecurityGroupEgress[]'.
  Property 'push' does not exist on type 'IResolvable'.

It seems like a type guard is needed to handle the optional variable being of a different type. Despite trying various if statements, I continue to face the same error. It's worth noting that this file compiles without any issues on older versions. Both setups utilize strict compile options in the tsconfig.json file. Any assistance would be greatly appreciated. Thank you!

typescriptterraformterraform-provider-awsterraform0.12+terraform-cdk

Answer №1

The reason behind this issue is likely due to setting an IResolvable, such as a reference from another resource, to this specific input field. One way to tackle this problem is by taking a shortcut approach and assuming that there are no references present.

(this.ingressInput as any).push(this._normalize_rule(config))

Alternatively, you can verify if it's an array before proceeding:

add_ingress(config: SecurityGroupIngress) {
  if (Array.isArray(this.ingressInput)) {
     this.ingressInput.push(this._normalize_rule(config))
  } else {
     throw new Error("Could not add the ingress, the input is not an array")
  }
}

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

Encountering a 404 error while trying to deploy a React app on Verc

After deploying my React project with TypeScript using Vite, everything is working smoothly. However, I am encountering a 404 error when trying to refresh the page. Error: 404 NOT_FOUND Error Code: NOT_FOUND ...

reactjstypescriptvitevercel

Attempting to revert the imported module back to its initial/default mock configuration

When working on my test file, I utilize a folder named mocks which contains various exported functions. Most of the time, I rely on the mocks folder to perform all necessary tasks. However, there is one scenario where I need to adjust the return value to a ...

typescriptunit-testingmockingjestjs

Transforming a material-ui component from a class to a function

Currently, I am in the process of learning material-ui, and it seems that most of the code examples I come across are based on classes. However, the new trend is moving towards using functions instead of classes due to the introduction of hooks. I have be ...

reactjstypescriptreact-reduxreact-routermaterial-ui

The browser is not displaying the HTML correctly for the Polymer Paper-Menu component

I attempted to implement a paper-menu, but I am facing issues with the rendered HTML and its interaction. When I click on a menu item, the entire list disappears due to the paper-item elements not being properly placed inside a key div within the paper-men ...

htmltypescriptangularpolymerpaper-elements

Error animation on client-side validation not resetting correctly

Incorporated a form validation and error display system utilizing TransitionGroup for animations. The flag issueVisible manages the visibility of the error message, while determineField() aids in identifying the field related to the error. The issue arise ...

javascripttypescriptvue.jsvalidationvuejs3

Fire the props.onChange() function when the TextField component is blurred

Currently, I am in the process of developing a NumberField component that has unique functionality. This component is designed to remove the default 0 value when clicked on (onFocus), allowing users to input a number into an empty field. Upon clicking out ...

reactjstypescriptonchange

Transform the IO type to an array of Either in functional programming with the fp-ts

Looking for assistance with implementing this in fp-ts. Can someone provide guidance? const $ = cheerio.load('some text'); const tests = $('table tr').get() .map(row => $(row).find('a')) .map(link => link.attr(&apos ...

typescriptfp-ts

Is it possible for me to use an array as an argument for the rest parameter?

One of the functions in my codebase accepts a rest parameter. function getByIds(...ids: string){ ... } I have tested calling getByIds('andrew') and getByIds('andrew','jackson'), which successfully converts the strings into a ...

typescriptecmascript-6

Typescript is unable to comprehend that the initial item in an array of strings is considered to be a string

Here are the functions I am working with: const transitionGroup = ( propertyName: string, durationMultiple = 1, timingFunction = 'linear', delayMultiple = 0, ): string => { // ...more logic here return [propertyName, duration, tim ...

javascripttypescript

Customize radio buttons in React using React Hook Form. Personalize the

I am currently working on a form using react-hook-form to update data with two radio options. The form is able to read and display the data correctly, however, when I try to change the value, the interface does not update accordingly. Can anyone help me id ...

reactjstypescriptreact-hook-form

Utilizing a function within the catchError method

A function has been defined to handle errors by opening a MatSnackBar to display the error message whenever a get request encounters an error. handleError(err: HttpErrorResponse) { this.snackBar.open(err.message) return throwError(err) } When subs ...

angulartypescripterror-handlingrxjs

Exciting Dynamic Text Animation in React using styled components

I came across this cool jumping text effect on https://web.dev/patterns/animation/animated-words/ and wanted to incorporate it into my app. However, when I tried implementing the component in React, I encountered some issues. I created a styled component a ...

reactjstypescriptstyled-components

An object may be null when its type is A or undefined, but we are certain it is not undefined

Since the release of version 4.8.4, the TypeScript compiler has been flagging an issue with the following code: type A = {v: number} function get_the_first<T>(xs: T[]): T | undefined { if (xs.length > 1) return xs[0]; else ...

typescript

Load Angular component on demand with necessary dependencies

Searching for an elegant solution (without resorting to private APIs) to create a widget-style dashboard. The goal is to dynamically load components based on user role. Is there a way to import a component and its dependencies included in the component&ap ...

htmlangulartypescriptangular-ivy

Why does my array seem to update only once in the view?

I am currently working on a project that aims to visually represent sorting algorithms, but I have encountered an issue. In order to effectively visualize the sorting process of an algorithm, it is crucial to display every change in the array as the proc ...

htmlarraysangulartypescriptsorting

In TypeScript, at what level should the timeout be specified?

I'm currently working on writing a debounce function in TypeScript, but I'm feeling uncertain about the type that should be assigned to a variable used with setTimeout. This is the snippet of my code: function debounced(func: () => void, wait ...

javascripttypescriptecmascript-6

Transfer all the child nodes to the parent using the spread operator or Object.assign while preventing duplicate properties from being overwritten

I'm trying to transfer all the nodes of a child node to the parent using the spread operator or Object.assign (without relying on Lodash) while avoiding overwriting existing properties. My initial thought was to simply append the childArray to the ro ...

javascripttypescript

What could be preventing the nesting of observables from functioning properly in Ionic-Angular?

Working with Observables has been an interesting experiment for me, but I'm facing an issue that I can't seem to resolve. While all the methods work perfectly fine when called outside the pipe, the problem arises when I nest them like this: creat ...

angulartypescriptionic-frameworkrxjsrxjs-observables

Having trouble with image loading in NextJS after replacing an old image with a new one?

I have been attempting to swap out my current banner with different images to test if they work, but every image I try leads to an error when using next/image or even a simple <image> tag. The error message states that "The requested resource isn&apo ...

reactjstypescriptnext.js

ng-click is not triggering my function

I'm really struggling to understand how AngularJS and Typescript can work together efficiently. My main goal is to make a simple method call, but I seem to be stuck due to some constraints in the architecture I have chosen. I must have made a mistake ...

htmlangularjstypescript