It keeps returning "TypeError: Cannot read properties of undefined (reading 'map')"

[maxpaleo]

Hi! I am trying out the package but it keeps on returning TypeError: Cannot read properties of undefined (reading 'map') thrown by the fromMarkdownfunction.

This documentation does not direclty show how to pass the toc value in the tocprop for component, but I assume you take the entire return value from the fromMarkdown funciton and pass it right? As shown in the screenshot below.

However, when I do this it keeps throwing the error.

[maxpaleo]

[maxpaleo]

Below is a screenshot of the logged value of tocreturned by the fromMarkdown; note that index and endIndex are undefined though. I am not sure if that's meant to be.

[zhangyu1818]

Hi @maxpaleo , I created a minimal example, please see if it solves your error.

[maxpaleo]

Thanks; let me check!

[maxpaleo]

Yes, your example using the "data" string works, it seems to be an issue with charachters inside of the markdown I am using. I started some debugging, and it seems to be related to something trying to create an invalid url.

Below is the exact string that I am using which is causing issues:

# **Class: AccessControl**

The `**AccessControl**` class provides a comprehensive system for managing user permissions and quotas. It leverages caching mechanisms to optimize performance by reducing the frequency of HTTP requests for data retrieval.**[​](https://docs.kobble.io/libraries/fullstack-sdk/next/references/classes/access-control#public-methods)**

### **Public Methods****[​](https://docs.kobble.io/libraries/fullstack-sdk/next/references/classes/access-control#listpermissions-options-nocache-boolean-promise-permission)**

`**listPermissions(options?: { noCache?: boolean }): Promise<Permission[]>**`

**Parameters:**

- `**options**`: `**object**` (optional) - Configuration options for the request.
- `**noCache**`: `**boolean**` (optional) - If set to true, bypasses the cache and fetches permissions directly from the server.

**Returns:** `**Promise<Permission[]>**` - A promise that resolves to an array of permissions.

**Description:** Retrieves the list of permissions for the logged-in user. It first checks the cache; if not found or if `**noCache**` is true, it fetches from the server.

### **[​](https://docs.kobble.io/libraries/fullstack-sdk/next/references/classes/access-control#listquotas-options-nocache-boolean-promise-quota)**

`**listQuotas(options?: { noCache?: boolean }): Promise<Quota[]>**`

**Parameters:**

- `**options**`: `**object**` (optional) - Configuration options for the request.
- `**noCache**`: `**boolean**` (optional) - If set to true, bypasses the cache and fetches quotas directly from the server.

**Returns:** `**Promise<Quota[]>**` - A promise that resolves to an array of quota usages.

**Description:** Retrieves the list of quotas for the logged-in user in a similar fashion to `**listPermissions**`, utilizing caching and direct server fetch logic based on the provided options.

### **[​](https://docs.kobble.io/libraries/fullstack-sdk/next/references/classes/access-control#haspermission-permissionnames-string-string-promise-boolean)**

### `**hasPermission(permissionNames: string[] | string): Promise<boolean>**`

**Parameters:**

- `**permissionNames**`: `**string[] | string**` - The names of the permissions to check. Can be a single name or an array of names.

**Returns:** `**Promise<boolean>**` - A promise that resolves to `**true**` if all specified permissions are granted to the user, `**false**` otherwise.

**Description:** Checks if the logged-in user possesses all specified permissions. It handles both single permission checks and arrays of permissions.

### **[​](https://docs.kobble.io/libraries/fullstack-sdk/next/references/classes/access-control#hasremainingquota-quotanames-string-string-promise-boolean)**

### `**hasRemainingQuota(quotaNames: string | string[]): Promise<boolean>**`

**Parameters:**

- `**quotaNames**`: `**string[] | string**` - The names of the quotas to check. Can be a single name or an array of names.

**Returns:** `**Promise<boolean>**` - A promise that resolves to `**true**` if the user has unused quotas for all specified items, `**false**` otherwise.

**Description:** Evaluates if the user has remaining quota for specified items.

[maxpaleo]

Okay, It looks like the issue is related to backticks inside of the markdown, which I believe split the string when used somewhere in the logic.

To confirm: The fromMarkdown function should be provided the markdown for the entire "Markdown file" right? Not a parsed version that only contains the certain elements?

[maxpaleo]

I tried explicitly escaping the backticks but this doesn't fix it either:

[maxpaleo]

Okay, i got it to work. It seems like some characters will throw errors.

In my MD, it was the <charachter, but there might be others.

const test = `### **hasPermission(permissionNames: string[] | string): Promise<boolean>*`; // < Throws errors
const test = `### **hasPermission(permissionNames: string[] | string): Promiseboolean>*`; // < Works

[maxpaleo]

So removing the \`` and<` from the markdown prevents the map error, but it seems like the TOC component isn't handling other cases as well.

The markdown I am providing renders technical documentation, and it seems like several patterns will prevent it from correctly recognizing the elements.

[zhangyu1818]

It seems this library does not support rendering complex titles yet. It only judges list, listItem, paragraph, link.

Thank you for your feedback. I will improve it later.

[maxpaleo]

Gotcha, thanks!

[zhangyu1818]

By the way, your Markdown might not be perfectly formatted. You can preview it online here.

[maxpaleo]

It seems correct on my end; in general: the markdown is coming straight from a markdown editor api, so the content should technically be ok:

[zhangyu1818]

Of course, just a gentle reminder in case the results differ from what you expected.

[maxpaleo]

I am running into a similar issue with the remark-flexible-toc lib, so this issue might be too specific; I wouldn't bother spending time on this if not needed, maybe add a basic type check in the TOC component to confirm the data format is correct before it runs into an error

[maxpaleo]

Well, a type check wouldn't work as its a string. So yea, forget it guess, its too specific

[maxpaleo]

Thanks for checking in though.