Argument of type 'this' is not assignable to parameter of type 'Stack'.

[Tswalano]

How did you install the Amplify CLI?

npm

If applicable, what version of Node.js are you using?

v18.16.1

Amplify CLI Version

12.1.1

What operating system are you using?

Mac

Did you make any manual changes to the cloud resources managed by Amplify? Please describe the changes made.

No manual changes made

Describe the bug

Following this documentation without touching anything, the code throws:

Argument of type 'this' is not assignable to parameter of type 'Stack'. Property 'toYamlString' is missing in type 'cdkStack' but required in type 'Stack'.ts(2345) stack.d.ts(328, 5): 'toYamlString' is declared here.

The docs are out of date and still using the CDK v1 (or is this on purpose? Does amplify custom support the cdk v2? running amplify push results in:

Fetching updates to backend environment: dev from the cloud.🛑 Failed building resource customResource
✖ There was an error pulling the backend environment dev.
🛑 There was an error building the custom resources
Command failed with exit code 2: 

amplify/backend/custom/customResource/node_modules/.bin/tsc
cdk-stack.ts(29,9): error TS2345: Argument of type 'this' is not assignable to parameter of type 'Stack'.
  Property 'toYamlString' is missing in type 'cdkStack' but required in type 'Stack'.

Resolution: There may be errors in your custom resource file. If so, fix the errors and try again.
Learn more at: https://docs.amplify.aws/cli/project/troubleshooting/

Session Identifier: 36eac1b6-8397-4c58-9f00-b437bb2d2361


### Expected behavior

This should allow me to create custom resolver for my APIs 

### Reproduction steps

1. amplify add custom
2. Amplify push

### Project Identifier

2a1a5abf215bc8ea439046e72269921e

### Log output

<details>

Put your logs below this line

</details>


### Additional information

_No response_

### Before submitting, please confirm:


- [X] I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.
- [X] I have removed any sensitive information from my code snippets and submission.

[ykethan]

Hey @Tswalano, thank you for reaching out. Thank you for pointing the documentation, we will work on updating the example.
The issue appears to be a duplicate of #13122. The issue occurs when there is a version mismatch between the version of aws-cdk-lib the extensibility helper depends on and the version that is installed directly to the custom resource's package.json.
Could you try matching the version similar to the example here: #13122 (comment)

Does amplify custom support the cdk v2?

Amplify custom currently does support AWS CDK v2, please refer to the document providing information on the migration: https://docs.amplify.aws/cli/migration/aws-cdk-migration/

[Tswalano]

This seems to fix the issue thank you... While i still have you here can we also use APPSYNC_JS to write the resolvers in the Amplify Custom CDK instead of using VTL templating?

[ykethan]

@Tswalano glad to hear that you were able to mitigate the issue.

While i still have you here can we also use APPSYNC_JS to write the resolvers in the Amplify Custom CDK instead of using VTL templating?

Yes, we can write a custom resource that creates JS resolvers similar to the example.

For example:

Schema

input AMPLIFY {
  globalAuthRule: AuthRule = { allow: public }
} # FOR TESTING ONLY!
type Todo @model {
  id: ID!
  name: String!
  description: String
}

type Query {
  querySomething(id: String!, name: String): Todo
}

Custom resource:

const requestJS = `
import { util } from '@aws-appsync/utils'

export function request(ctx) {
  return {
    operation: 'GetItem',
    key: util.dynamodb.toMapValues({ id: ctx.args.id }),
  }
}

export function response(ctx) {
  return ctx.result
}
      `;

// unit resolver
const resolver = new appsync.CfnResolver(this, "custom-resolver", {
  apiId: cdk.Fn.ref(retVal.api.<app-name>.GraphQLAPIIdOutput),
  fieldName: "querySomething",
  typeName: "Query", 
  dataSourceName: "TodoTable", // DataSource name
  runtime: {
      name: "APPSYNC_JS",
      runtimeVersion: "1.0.0",
    },
    code: requestJS,
});

I would suggest testing this in a test/dev environments for any unexpected behaviours.

[Tswalano]

Awesome.. Thanks :)

[github-actions]

⚠️COMMENT VISIBILITY WARNING⚠️

Comments on closed issues are hard for our team to see.
If you need more assistance, please open a new issue that references this one.
If you wish to keep having a conversation with other community members under this issue feel free to do so.