#Cannot read properties of undefined (reading 'map')

3 messages · Page 1 of 1 (latest)

grim schooner
# 
import logo1 from "@logos/logo-health-services-labs.jpg"
import logo2 from "@logos/logo-the-doctors-laboratory.png"

export const clients = [
  {
    "name": "Health Services Laboratories (HSL)",
    "logo": logo1
  },
  {
    "name": "The Doctors Laboratory (TDL)",
    "logo": logo2
  }
]

---
import clients from "@data/clients.ts"
---

            <div class="grid grid-cols-fill-300 gap-2 mt-10">
        { clients.map((client) =>
                    <div class="bg-white border-slate-100 p-4 py-10 flex flex-col justify-center items-center">
                        <Image src={ client.logo }
                                     alt={ client.name }
                                     class="max-h-20 w-full object-contain self-center"
                                     widths={ [200, 300, 400, 600] }
                        />
                    </div>
        ) }
            </div>

Why is this erorr occuring?

sour hullBOT
#

Hi @grim schooner. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

The error Cannot read properties of undefined (reading 'map') typically occurs when you're trying to call the map function on a variable that is undefined. In your case, it seems like the clients variable might be undefined at the time you're trying to map over it.

This could be due to several reasons:

  1. The import statement might not be correct. Ensure that the path in the import statement is correct and that the clients.ts file is being correctly imported.

  2. The clients.ts file might not be exporting the clients array correctly. Ensure that the clients array is being exported correctly from the clients.ts file.

  3. There might be an issue with the Astro framework itself. There have been several reported issues on the Astro GitHub page where users have encountered similar errors. For example, in issue #6655 (https://github.com/withastro/astro/issues/6655), a user reported a similar error when trying to map over a passed property. The error only occurred during the build process and not in the local development environment.

To debug this issue, you could try the following:

  • Log the clients variable to the console before the map function to check if it's undefined.
  • Check the import and export statements.
  • Try running the code in a local development environment and see if the error still occurs.
  • Check the Astro GitHub page for similar issues and potential solutions.

If none of these steps help, it might be a good idea to create a new issue on the Astro GitHub page and provide all the relevant details. The Astro community or the Astro team might be able to provide further assistance.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: