Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'emailAddress')

I am parsing a few emails from a CSV in the method below and i am getting Cannot read properties of undefined (reading ’emailAddress’). I even tried filtering the undefined results out but no luck . How can I filter the ones that are undefined.

 const getContactsFromText = (text) => {
        if(text == "" || text.trim() == '' || text === undefined){
            settingTheAlert();
            return;
        }
        const contacts = text.split(/[,;\n]/)
            .filter(x => x.length > 0)
            .map(x => x.trim())
            .map(x => {
                const [, , displayName = '', emailAddress = ''] = x.match(/"?((.*?)"?\s*<)?([^">]*)/);
                if (!emailAddress && !displayName) return;
                if(emailAddress === undefined) return;
                return { id: emailAddress, emailAddress, displayName, isChecked: true };
            })
            .filter(x => isValidEmail(x.emailAddress))
            .sort(sortByEmail);
        if(contacts.length < 1){
            settingTheAlert();
            return;
        }

        onImport(contacts);
    }

const isValidEmail = (email) => {
        const EMAIL_RE = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        const isValid = EMAIL_RE.test(String(email).toLowerCase());
        if (!isValid) console.log('invalidEmail', { email })
        return isValid;
    }

>Solution :

In your code here:

.map(x => {
     const [, , displayName = '', emailAddress = ''] = x.match(/"?((.*?)"?\s*<)?([^">]*)/);
     if (!emailAddress && !displayName) return;
     if (emailAddress === undefined) return; // this is useless (it's covered above)
     return { id: emailAddress, emailAddress, displayName, isChecked: true };
    };
})

you implicitly return nothing/undefined on these lines:

if (!emailAddress && !displayName) return;
if (emailAddress === undefined) return; // again, this line is not needed

which is equivalent to returning undefined. Then in the subsequent filter you assume the x.emailAddress exists, but it might not, as just above you were returning undefined under some corner cases.

To remedy that you either:

1. Gotta change your filter function (probably the best solution)
2. Make the isValidEmail function expect the whole email object rather than the expected string (probably a bit less desirable)

If you got for the first approach, it should look something like:

// ... other code
.map(x => {
       const [, , displayName = '', emailAddress = ''] = x.match(/"?((.*?)"?\s*<)?([^">]*)/)
       if (!emailAddress && !displayName) {
          return null
       }
       return { id: emailAddress, emailAddress, displayName, isChecked: true }
})
.filter(emailObj => emailObj && isValidEmail(emailObj.emailAddress)) // checking first that the emailObj is not undefined and then checking if the emailObj.emailAddress is valid.

Should work.