[ic-data-table]: Cannot read properties of undefined (reading 'map') - when slotting custom elements in
- Dominant language
- TypeScript
- Stars
- 53
- Forks
- 63
- Avg merge
- 2d 4h
- Merged PRs (30d)
- 15
Description
## Summary of the bug
Exception that blocks rendering of the whole page when loading sometimes:
Cannot read properties of undefined (reading 'map') - when slotting custom elements in

## 🪜 How to reproduce
Tell us the steps to reproduce the problem:
1. Refresh the page a few times, normally between 3 and 10 times will reproduce the issue
2. See a white page
Note: It seems to be the slotting in React components that causes this, if I remove the data map to add a component I don't get the error, (I need this though this is a simplified example)
## 📸 Screenshots or code
If you can, add screenshots to show the problem. If you need to show a code example, you can include a snippet or link to a repository with an example.
Repo: https://github.com/timja/ukic-reproducer-2740

package.json
```json
{
"dependencies": {
"@ukic/canary-react": "^2.0.0-canary.28",
"@ukic/react": "^2.30.0",
"next": "^14.2.17",
"react": "^18.3.1",
"react-dom": "^18.3.1"
},
}
```
page.tsx
```tsx
import PageInner from "@/app/page-inner";
export default function Home() {
return ;
}
```
page-inner.tsx
```tsx
"use client";
import {IcDataTable} from "@ukic/canary-react";
import {IcDataTableColumnObject} from "@ukic/canary-web-components";
import React from "react";
import {IcTypography} from "@ukic/react";
export default function PageInner() {
const columns: IcDataTableColumnObject[] = [
{
key: 'first',
title: 'First name',
dataType: 'string',
},
{
key: 'last',
title: 'Last name',
dataType: 'string',
},
{
key: 'status',
title: 'Status',
dataType: 'string',
},
]
const data = [
{
first: "Joe",
last: "Bloggs",
status: "In progress"
},
{
first: "Sarah",
last: "Smith",
status: "Review"
},
{
first: "Mark",
last: "Bloggs",
status: "Draft"
},
]
const renderCustomElements = (index: number) => {
return (
Hi
)
}
return (
{data.map((row, index) => renderCustomElements(index))}
)
}
```
## 🖥 📱 Device
- Type: Desktop
- Device: MacBook
- OS version: macOS
- Browser version: Chrome 130
## 🧐 Expected behaviour
Consistently works
## 📝 Acceptance Criteria
If relevant, describe in full detail the different interactions and edge cases that the component or patterns needs to fulfil.
*Given*
*When*
*Then*
## Additional info
If I disable SSR it seems to work around this issue, that's changing the import on page.tsx
from:
```tsx
import PageInner from "@/app/page-inner";
```
to:
```tsx
import dynamic from "next/dynamic";
const PageInner = dynamic(() => import('./page-inner'), { ssr: false });
```
Maybe https://github.com/mi6/ic-ui-kit/issues/2317 would fix this?
Contributor guide
Research direction
Start with the linked ukic-reproducer-2740 and compare page.tsx with page-inner.tsx, reproducing the failure under SSR and the workaround with ssr: false. Then trace ic-data-table custom-element slotting and review issue 2317 for related context. Done means the supplied data.map slotting example renders consistently with SSR without the undefined map error.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- nextjs, react, typescript
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100