Undefined is not an object

Elements Custom Components
1

Hi guys,

I have an image control but when dropping it onto the page, it’s giving me
‘Undefined is not an object’ in the edit window and breaks everything from running. I tried doing a simple check to see if that control has an image assigned, but the parser isn’t working right or there’s a trick to checking it?

Everything starts working once you drop an image in, but I need a way to check for no image and assign a dummy value just to let things keep running. How do I do that in the Hooks?

This is what I tried: let check = rw.props.myid.aspect;

2

Hi @Bill I’m not sure to correctly understand your need, but here’s a proposal with what I understood. It sounds like you’re trying to check if an image has been assigned to your myid control, but running into issues because the property isn’t yet defined when it’s empty. In Realmac Elements, if a control’s property (like an image aspect) is undefined, referencing it directly will lead to errors. To prevent this, you can use a conditional check in the Hooks section to assign a fallback or dummy value if no image is present
Try adding this in the Hooks section:

rw.hooks.beforeRender = () => {
  if (!rw.props.myid || !rw.props.myid.aspect) {
    rw.props.myid = {
      aspect: 'default-aspect',
      src: 'path/to/placeholder/image.jpg'
    };
  }
};

This checks if the image is undefined and assigns a placeholder to prevent errors. Replace the placeholder path and aspect as needed. Again I’m not sure to have understand correctly. Hope that helps :crossed_fingers:

3

Thanks Bruno - appreciate the suggestion - note: hooks or beforeRender throws errors, but this got me thinking about a different approach. I used a switch statement and a case of undefined to set myid to something and then default case to run when user drops in an image. Also another note: else statements aren’t allowed in hooks for some weird reason.

After doing this, still wondering if I could set a default path to a image in resources and hopefully that would be automatically adjusted from the crazy file name on the computer to the regular path when previewed/published. @tpbradley Maybe some quick help here on setting the path/image attribute for a default image so I can get going again

4

Yes it’s a theoretical approach, not working at all is weird, maybe undocumented stuff?
Another try : if rw.hooks.beforeRender is throwing errors, it’s possible that the context doesn’t allow certain operations before the component is fully initialized. As an alternative, try using rw.hooks.didMount, which runs after the component is mounted and might handle undefined properties more gracefully.
Here’s:

rw.hooks.didMount = () => {
  if (!rw.props.myid || !rw.props.myid.aspect) {
    rw.props.myid = {
      aspect: 'default-aspect',
      src: rw.resolveAssetPath('resources/placeholder.jpg')
    };
  }
};

Using didMount instead of beforeRender might prevent those initialization issues and still set a fallback if the image is missing.
This way, didMount checks for an undefined image and assigns a fallback aspect and source path. Using rw.resolveAssetPath for the default path should automatically adjust for the preview and published environments, letting you reference a placeholder image without worrying about path differences.
Again it’s a theoretical approach but in the best of the world it should work :four_leaf_clover::crossed_fingers::magnet::8ball:

5

The error ‘Undefined is not an object’ occurs because you are attempting to access myid.aspect when myid itself is undefined. This would be the case if myid represents an empty image resource.

Solution

To prevent this error, ensure that myid exists before accessing its properties. Here are a couple of JavaScript techniques to handle this:

  1. Type Checking

First, verify that myid is defined and is an object:

const { myid } = rw.props;

if (typeof myid === "object") {
  // Safe to access properties of myid
}
  1. Optional Chaining

Another approach is to use optional chaining to safely access aspect without throwing an error if myid is undefined:

let check = rw.props.myid?.aspect;

This is not specific to Elements; it’s native JavaScript, giving you the flexibility to check, set, or update properties as needed.

Also, the hooks.js file is processed before templates, so “beforeRender”, if you will :slight_smile:

2 Likes
6

Is it possible to programmatically set an image path/image attribute, I guess with rw.setProps?