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

Question

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;
    }

Answer 1

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.