How to Debug "Cannot read property 'trigger' of undefined" in Custom Component?

Help
1

This topic was automatically generated from Slack. You can find the original thread here.

I’m struggling with a custom component to receive the steps property from a source. My action looks as follows:

export default {
  name: "...",
  description: "...",
  key: "...",
  version: "0.0.3",
  type: "action",
  props: {},
  async run({ steps, $ }) {
    const products = steps.trigger.event;
    console.log(products.length);
    return products[0]['Product ID'];
  },
}

In testing my source is producing results but I’m getting “Cannot read property ‘trigger’ of undefined” in this step’s execution. As far as I can tell the steps property is not included in the passed-in arguments.

Does anyone have suggestions on how to further debug?

2

Hello , in the action code, you can not use the steps.trigger.event. Instead, you need to use prop, such as

export default {
  name: "...",
  description: "...",
  key: "...",
  version: "0.0.3",
  type: "action",
  props: { 
     // define property
     products: {
       type: 'array'
     }
  },
  async run({ steps, $ }) {
     // use the prop
    const products = this.products;
    console.log(products.length);
    return products[0]['Product ID'];
  },
}
3

Then you can pass the steps.trigger.event into the action products prop

4

Thanks for jumping in Leo!
But I think I’m more confused now. The source that feeds this action shows the attached screenshot in the builder UI

image.png
image.png920×218 9.98 KB

5

So I interpreted that as being able to access the data through that object. If some mapping needs to occur can you point me to an example or documentation that describes how it works?

6

That steps object is available in Node.js/Python code step. But it is NOT available for action code. You’ll need to use prop for that

7

For action development, I strongly recommend you read through this document to understand its capabilities: Component API Reference

8

Thanks - I have been referencing those docs as I built a source and this component. It seems like I missed something about data being passed between steps.

Can you help me understand then how to map the result (emitted event) from a source onto a property for the action? Or perhaps Pipedream exposes a UI to do that mapping once the property is defined?

9

I’ve made that same mistake before, maybe we can update the docs to make it clearer

10

You can pass the other steps data into your action code as custom expression in prop

image.png
image.png1378×1566 193 KB

11

Hello , I think this is an opportunity for us to improve our component development doc.

12

FWIW the invitation in the UI of the source to reference steps.trigger.event was confusing.

And if you can call out the distinction between components versus code blocks wherever the async run( { steps, $ } ) { ... } examples exist would also have moved me in the right direction.

13

I agree! the steps vs this and props is one of this most confusing differences. I’ve covered it within the publishing actions docs and videos, but we haven’t updated sources in particular in some time. It’s on the list!