Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

Create a Blitz app: https://blitzjs.com/docs/get-started#create-a-new-app
Add Ionic React 6
Render a component using IonCol
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.

Issue Analytics

State:
Created 2 years ago
Reactions:1
Comments:9 (5 by maintainers)

Top GitHub Comments

1reaction

liamdebeasicommented, Jan 19, 2022

Thanks for the issue. This has been resolved via https://github.com/ionic-team/ionic-framework/pull/24603, and a fix will be available in an upcoming release of Ionic Framework.

1reaction

sean-perkinscommented, Jan 7, 2022

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.

Top Results From Across the Web

Ionic Server Side Rendering (SSR)

Guide on the importance of server side rendering and how to add it to your Ionic Angular app.

Ionic 6 increment decrement button not working - Stack Overflow

I'm trying to make a number input field with + and - buttons to increase quantity. The problem I'm facing is that my...

Latest Ionic Angular topics

Topic Replies Views Activity The UIWebView problem with latest ionic CLI 9 613 July 6, 2021 Ionic InAppPurchase2 1 582 July 4, 2021 How can i...

Ionic Forum - Latest posts - RSSing.com

Ionic v3 scoped CSS ... However, it's still possible for a parent's styles to unintentionally affect child components. That's the problem I've ...

Framework7 Release Notes

Bug Fixes. react: fix not working correctly change event with swipe (9888e16); svelte: method to get Smart Select instance in Link component (558b629), ......