bug: ion-split-pane is broken in SSR (after fix) and does never render

[Tvde1]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v6.x, v7.x

Current Behavior

When Server Side Rendering is used, the ion-split-pane component is broken. The menu pane will not show up along with any menu-button in the page toolbar. Client-side hydration does not make it re-appear.
This is related to issue #24714, which was supposedly 'fixed' in #26854.

Unfortunately this turns half-broken SSR websites (which needed client hydration) into completely broken websites because client hydration does not fix it, and the menu pane will never show up.

Expected Behavior

Either the ion-split-pane shows up nicely in server-side-rendered pages, or it does not show up but client-side hydration fixes it (old behavior).

Steps to Reproduce

Taken from my comment on the linked issue:

1. Create the project

ionic start myApp sidemenu --type angular
cd myApp
npm install @angular/animations
ng add @nguniversal/express-engine
npm install @ionic/angular-server

(you might need to run npx ionic start...)

2. Enable Ionic SSR

And updating app.server.module.ts with:

 import { NgModule } from '@angular/core';
 import { ServerModule } from '@angular/platform-server';
 import { AppModule } from './app.module';
 import { AppComponent } from './app.component';

+ import { IonicServerModule } from '@ionic/angular-server';

 @NgModule({
   imports: [
     AppModule,
     ServerModule,
+    IonicServerModule
   ],
   bootstrap: [AppComponent],
 })
 export class AppServerModule {}

3. Update server.js

I had to update server.js because node:fs and node:path could not be found.

 import { APP_BASE_HREF } from '@angular/common';
 import { ngExpressEngine } from '@nguniversal/express-engine';
 import * as express from 'express';
-import { existsSync } from 'node:fs';
+import { existsSync } from 'fs';
-import { join } from 'node:path';
+import { join } from 'path';
 import { AppServerModule } from './src/main.server';

4. Run

Build & serve the application with:

npm run build:ssr
npm run serve:ssr

Observe that the split pane does not appear:

Code Reproduction URL

https://github.com/Tvde1/ion-split-pane-SSR-bug-repro

Ionic Info

Ionic:

   Ionic CLI                     : 5.4.16 (C:\Users\[...]\AppData\Local\npm-cache\_npx\864a9e3c2cd0cf50\node_modules\ionic)
   Ionic Framework               : not installed
   @angular-devkit/build-angular : 16.0.2
   @angular-devkit/schematics    : 16.0.2
   @angular/cli                  : 16.0.2
   @ionic/angular-toolkit        : 9.0.0

Capacitor:

   Capacitor CLI   : 5.0.3
   @capacitor/core : 5.0.3

Utility:

   cordova-res : not installed
   native-run  : 1.7.2

System:

   NodeJS : v20.2.0 (C:\Program Files\nodejs\node.exe)
   npm    : 9.6.6
   OS     : Windows 10

Additional Information

No response

[muchbetterug]

We have the same problem, any workaround? SSR is such a pain ..

[Tvde1]

Is there any ETA on when this issue can be investigated? Or is this a very difficult issue to solve?

I can't be the only one who can't upgrade ionic. New projects using the popular starter template are also broken.

[muchbetterug]

Same here, want to use ssr, but ion-split-pane is one of the show stoppers

[sean-perkins]

Debugging another issue with Angular Universal I looked at the reported case here.

I'm observing between the SSR build and the client build, this style block is missing from the SSR build:

:host(.split-pane-visible) ::slotted(.split-pane-side:not(ion-menu)), :host(.split-pane-visible) ::slotted(ion-menu.split-pane-side.menu-enabled) {
  display: flex;
  flex-shrink: 0;
}

Adding those styles to the ion-menu directly, results in the menu being visible within the split pane view.

[sean-perkins]

Follow-up! This issue does overlap with #27314. Both are caused by the ion-menu being disabled after hydration from the server module.

Setting the ion-menu to enabled on the client results in both the ion-menu-button being interactable and the ion-split-pane rendering correctly.

I'll combine the issues tomorrow and try to root cause what is contributing to this. I did a smoke test around removing: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/menu/menu.tsx#L191-L194 and while it does likely contribute, it does not resolve the problematic behavior with local testing.

[sean-perkins]

Hello everyone 👋

Could someone test with this dev-build and let me know if you experience any issues?

npm install @ionic/angular@7.1.4-dev.11689625795.1d16532b @ionic/angular-server@7.1.4-dev.11689625795.1d16532b

I will also note I think this issue overlaps with this 3+ year issue: #22206

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.