ionic-team / ionic-team/ionic-framework

bug: IonTabs throws when a Fragment contains one IonRouterOutlet

Open Beginner friendly
#31,410 1 comment 0 reactions 0 assignees View on GitHub
triage
Dominant language
TypeScript
Stars
52.7k
Forks
13.3k
Avg merge
1d 15h
Merged PRs (30d)
51

Description

### Prerequisites

- [x] I have read the contributing guidelines.
- [x] I agree to follow the Code of Conduct.
- [x] I searched existing issues without finding this problem.

### Ionic Framework Version

v8.x, v9.x, Nightly

### Current Behavior

When `IonRouterOutlet` is the only child of a React Fragment passed to `IonTabs`, rendering throws:

```text
TypeError: Cannot read properties of undefined (reading 'type')
```

`IonTabs` treats the Fragment's children as an array, but React stores a single child as an element.

### Expected Behavior

`IonTabs` should render when `IonRouterOutlet` is wrapped in a single-child Fragment.

### Steps to Reproduce

1. Clone the reproduction.
2. Run `npm install` and `npm run dev`.
3. Open the app.

### Code Reproduction URL

https://github.com/Benziza/ion-tabs-fragment-repro

### Ionic Info

```text
Ionic CLI : 7.2.1
Ionic Framework : @ionic/react 9.0.1
NodeJS : v25.6.0
npm : 11.12.1
OS : Windows 10
```

### Additional Information

Removing the Fragment allows the same app to render.

Contributor guide

Open the contributing guide

Research direction

Start with the IonTabs implementation and reproduce the failure using the linked app with npm install and npm run dev. Confirm the fix by rendering an IonRouterOutlet as the only child in a React Fragment passed to IonTabs without the TypeError.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
72/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.