Uncaught (in promise) TypeError: e.map is not a function in LWC.

Commons-error-in-LWC-JavaScript.
Commons-error-in-LWC-JavaScript.

How to handle Uncaught (in promise) TypeError: e.map is not a function.

Uncaught in promise Type Error
TypeError: e.map is not a function

You might face this kind of error in your lighting web component from your JavaScript file . Here are some of the possibilities of getting this type of error .

Case 1 :

Passing Wrong data to given field | Incorrect input to field | Invalid Format of input.

In my case I got this error when I was trying to pass options to my Picklist type field . Format of my given options was –

[{"value":"One","label":"One"}]

Where expected format was

JSON.parse([{"value":"One","label":"One"}])

Passing data in this format solved my issue . In your case you should check for input type of given field .

What the error means

map() works only on arrays. The message e.map is not a function says that the value you passed, shown as e in the minified code, is not an array. Components such as lightning-combobox call map on their options internally, so a wrong value for options is a common trigger.

Common causes

  • The value is a JSON string, not an array.
  • It is a single object, or a Map returned from Apex, not a List.
  • It is undefined or null because the data has not loaded yet.

Fix when the value is a JSON string

const options = JSON.parse('[{"value":"One","label":"One"}]');

JSON.parse takes a string and returns the array. Use it when your options arrive as text. Do not use it if you already have a real array.

A safe pattern for wired data

@wire(getPicklistOptions)
wiredOptions({ data, error }) {
    if (data) {
        this.options = Array.isArray(data) ? data : [];
    } else if (error) {
        this.options = [];
    }
}

Here getPicklistOptions stands for your own Apex method. The check makes sure the combobox always receives an array.

Debug steps

  1. Log the value with console.log(typeof value, Array.isArray(value)).
  2. Use JSON.stringify(value) to see its shape.
  3. Check what your Apex method returns.
  4. Make sure the property has a starting value of [].

FAQ

Why does the message say e and not my variable name?
The component code is minified, so variable names are shortened.

Does the same error appear with for:each?
Yes, if the value used in for:each is not an array.

Leave a Reply