bug: In Ionic 6, IonCol doesn't work in SSR

[SofianeDjellouli]

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

• v4.x
• v5.x
• v6.x

Current Behavior

In Ionic 6, IonCol doesn't work in SSR in Blitz JS.

Expected Behavior

To work in SSR

Steps to Reproduce

1. Create a Blitz app: https://blitzjs.com/docs/get-started#create-a-new-app
2. Add Ionic React 6
3. Render a component using IonCol
4. You get:

event - compiled successfully
event - build page: /api/rpc/getCurrentUser
wait  - compiling...
event - compiled successfully
08:03:01.785 INFO  getCurrentUser() Starting with input: null 
08:03:01.792 INFO  getCurrentUser() Finished: resolver:0ms serializer:2ms total:3ms 
 
08:03:03.113 INFO  getCurrentUser() Starting with input: null 
08:03:03.119 INFO  getCurrentUser() Finished: resolver:0ms serializer:5ms total:5ms 
 
event - build page: /_error
wait  - compiling...
event - compiled successfully
ReferenceError: window is not defined
    at eval (webpack-internal:///./node_modules/@ionic/core/components/ion-col.js:37:13)
    at Object../node_modules/@ionic/core/components/ion-col.js (/home/sofiane/sandbox/.next/server/pages/index.js:660:1)
    at __webpack_require__ (/home/sofiane/sandbox/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///./node_modules/@ionic/react/dist/index.js:47:19)
    at Object../node_modules/@ionic/react/dist/index.js (/home/sofiane/sandbox/.next/server/pages/index.js:1584:1)
    at __webpack_require__ (/home/sofiane/sandbox/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///./app/core/components/GridExample.tsx:7:70)
    at Object../app/core/components/GridExample.tsx (/home/sofiane/sandbox/.next/server/pages/index.js:66:1)
    at __webpack_require__ (/home/sofiane/sandbox/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///./app/pages/index.tsx:21:90)

Code Reproduction URL

https://github.com/SofianeDjellouli/blitz-ionic6-issue-reproduction

Ionic Info

[WARN] You are not in an Ionic project directory. Project context may be missing.

Ionic:

   Ionic CLI : 5.4.16

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v17.1.0
   npm    : 6.14.15
   OS     : Linux 4.19

Additional Information

It has nothing to do with it, but I had to use next-transpile-modules since Ionic 6 is using ES6 modules.

[ionitron-bot]

Thanks for the issue! This issue has been labeled as holiday triage. With the winter holidays quickly approaching, much of the Ionic Team will soon be taking time off. During this time, issue triaging and PR review will be delayed until the team begins to return. After this period, we will work to ensure that all new issues are properly triaged and that new PRs are reviewed.

In the meantime, please read our Winter Holiday Triage Guide for information on how to ensure that your issue is triaged correctly.

Thank you!

[sean-perkins]

@SofianeDjellouli thanks for reporting this issue!

At this time, web components that leverage the shadow DOM, are unable to be SSR: whatwg/dom#510 (comment)

The ion-col element currently is a shadow component.

I can discuss with the Stencil team after the New Year if there's any plans to add a fallback for attachShadow() with shadow components on SSR.

[SofianeDjellouli]

That would be great @sean-perkins ! Also, please note that ion-col is working in SSR in Ionic 5. Thanks for the great work.

[sean-perkins]

@SofianeDjellouli thanks for the extra context 🙂 I believe us moving to custom elements build instead of Stencil hydrated web components could be related. I'll assign myself so this issue doesn't get lost in Holiday Triage.

[sean-perkins]

Issue appears to be around here: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/col/col.tsx#L6

In v5 the web components were lazy loaded with Stencil, which likely mocks the window object for SSR. In v6 we moved to custom elements, which uses the native web component and doesn't have that extra safety.

We will need to introduce a few extra checks into this component to alleviate that. We'll capture as a bug and prioritize.

[sean-perkins]

Hello @SofianeDjellouli could you check this dev build in your example app and let me know if that resolves the IonCol issue?

yarn add @ionic/[email protected]

[Polarisation]

@sean-perkins I am experiencing the same bug.

In my case, I'm trying to get Ionic 6 to work with Next.js.

I've just tried with the latest dev build and it's not yet working for me.

My reproduction repo here: https://github.com/Polarisation/ionic-next-js
Adapted from a TypeScript / Ionic / Next.js example which worked correctly using Ionic v5.

[liamdebeasi]

Thanks for the issue. This has been resolved via #24603, and a fix will be available in an upcoming release of Ionic Framework.

[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.