Skip to content

fix(react): prevent error when an outlet unmounts before it's ready - #31517

Open
ShaneK wants to merge 1 commit into
mainfrom
fix/31513-outlet-unmount-before-ready
Open

ShaneK wants to merge 1 commit into
mainfrom
fix/31513-outlet-unmount-before-ready

Conversation

@ShaneK

@ShaneK ShaneK commented Oct 1, 2026 •

Copy link
Copy Markdown
Member

Issue number: resolves #31513


What is the current behavior?

Currently, an IonRouterOutlet with ionPage that unmounts before its componentOnReady callback fires throws Cannot read properties of null (reading 'classList'), because React has already cleared the ref the callback reads in OutletPageManager.

What is the new behavior?

We now capture the outlet element when the callback is scheduled and skip the callback if the ref no longer points to it, so an unmounted outlet doesn't touch its classes or register with the parent stack.

Does this introduce a breaking change?

  • Yes
  • No

Other information

The new test page mounts an outlet and removes it in a layout effect, which reproduces the error on every tap on main.

Current dev build

9.0.7-dev.11790871695.14a4111c

@ShaneK
ShaneK requested a review from a team as a code owner October 1, 2026 16:20
@ShaneK
ShaneK requested a review from brandyscarney October 1, 2026 16:20
@vercel

vercel Bot commented Oct 1, 2026 •

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated
ionic-framework Ready Ready Preview Oct 1, 2026 4:23pm UTC

Request Review

@OS-jacobbell OS-jacobbell left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

import { ionPageVisible, withTestingMode } from './utils/test-utils';

test.describe('Outlet Unmount Before Ready', () => {
test('does not throw when an ionPage outlet unmounts before it is ready', async ({ page }, testInfo) => {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These usually say "should," right?

This branch was successfully deployed

1 active deployment
Preview — 4a4111c6 Deployed Oct 1, 2026 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

package: react @ionic/react package

Projects

None yet

Development

Successfully merging this pull request may close these issues.

bug: React IonRouterOutlet throws when unmounted before initialization completes

2 participants