bug: angular, cannot read property of 'whenDefined' with ssr

[vitordhers]

Prerequisites

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

Ionic Framework Version

• [ ] v4.x
• [ ] v5.x
• [X] v6.x

Current Behavior

Folks, I'm using the brand new Ionic 6, trying to integrate it with Angular Universal through NestJs. It was working pretty well, until I noted that I was getting this error when running using server side rendering: Menu: must have a "content" element to listen for drag events on. After some time, I noticed that the <ion-menu-button> wasn't working. I tried using it programmatically using the MenuController, but it also didn't work. I run the code without SSR and the button was working properly. So I went out to find out what was the issue and I found this issue (https://github.com/ionic-team/ionic-framework/issues/21918#issue-678980726) where the solution apparently was to add @ionic/angular-server to my Angular AppModule. I did so, but now every time I try to access Angular's pages, I'm getting this error (in server console): ReferenceError: Cannot access 'ActionSheet' before initialization and this one (browser console): Uncaught SyntaxError: Strict mode code may not include a with statement I tried to search for those issues but sadly I couldn't find much related. If I remove IonicServerModule from AppModule the code runs, but the button naturally still doesn't work.

I'm not sure why this is happening. Is there any error with the Ionic version I'm using? Any substantial package that I'm missing?

From the SSR standpoint I understand that menu's contentId looks for its sibling with same id as it, and since that document is not available in that context, in fact, the menu won't have any content at all. But in browser, that doesn't make much sense. I also tried to conditionally render <ion-menu> tags for platform browsers. The Menu: must have a "content" element to listen for drag events on. error disappear, but still <ion-menu-button> isn't working. Any insights on this matter? I really appreciate it, thanks in advance.

Expected Behavior

The menu button should work after the implementation of IonicServerModule.

Steps to Reproduce

For reproducing issue with IonicServerModule

1. Download repo from code reproduction URL and Install dependencies;
2. Try running npm run dev:ssr or npm run serve:ssr;
3. Check logs on console when trying to access localhost:4200.

For reproducing issue with <ion-menu-button> not working / Menu: must have a "content" element to listen for drag events on.:

1. Download repo from code reproduction URL;
2. Remove IonicServerModule from AppModule (src/app/app.module.ts);
3. Run npm run dev:ssr or npm run serve:ssr;
4. Access localhost:4200/home;
5. Resize screen to <768px;
6. Click on hamburger icon at top right corner of the screen.

Code Reproduction URL

https://github.com/vitordhers/confraria

Ionic Info

Ionic:

Ionic CLI : 6.18.1 (/usr/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/angular 6.0.5 @angular-devkit/build-angular : 13.1.4 @angular-devkit/schematics : 13.1.4 @angular/cli : 13.1.4 @ionic/angular-toolkit : 4.0.0

Utility:

cordova-res : not installed globally native-run (update available: 1.5.0) : 1.4.1

System:

NodeJS : v16.13.2 (/home/dina/.nvm/versions/node/v16.13.2/bin/node) npm : 8.1.2 OS : Linux 5.13

Additional Information

Content related with cannot access "action-sheet" before initialization: https://github.com/ionic-team/ionic-framework/issues/24448 Content related with Uncaught SyntaxError: Strict mode code may not include a with statement: https://stackoverflow.com/questions/60114758/uncaught-syntaxerror-strict-mode-code-may-not-include-a-with-statement

[liamdebeasi]

Thanks for the issue. The Action Sheet error was fixed via https://github.com/ionic-team/ionic-framework/commit/897ae4a4546ac0dd811125d5513ef23d133a1589 and a fix will be available in an upcoming release of Ionic.

As for the contentId warning, using the @ionic/angular-server package should resolve that issue as you noted. In order for SSR to work as intended in Ionic Angular, you must use the @ionic/angular-server package.

I am trying to understand the Uncaught SyntaxError: Strict mode code may not include a with statement error but I cannot get your app to run. I get the following error:

Cannot find module 'src/environments/environment' or its corresponding type declarations.

Can you double check your reproduction case and make sure it has all the information I need to run the app?

[vitordhers]

Thanks for the issue. The Action Sheet error was fixed via 897ae4a and a fix will be available in an upcoming release of Ionic.

As for the contentId warning, using the @ionic/angular-server package should resolve that issue as you noted. In order for SSR to work as intended in Ionic Angular, you must use the @ionic/angular-server package.

I am trying to understand the Uncaught SyntaxError: Strict mode code may not include a with statement error but I cannot get your app to run. I get the following error:

Cannot find module 'src/environments/environment' or its corresponding type declarations.

Can you double check your reproduction case and make sure it has all the information I need to run the app?

@liamdebeasi , thanks for your prompt response and awesome support. The issue you mentioned was due to I added src/environments to the .gitignore. I updated repo and cloned it, now it's working, if you want to retry. Besides, I'm eager to receive any news on that future release. Once again, thanks a lot.

[liamdebeasi]

Thanks! I have a dev build with the Action Sheet fix:

npm install @ionic/[email protected] @ionic/[email protected]

After installing the dev build, I do not get the action sheet or strict errors. Can you try that dev build and let me know if it resolves the issue?

[vitordhers]

Hello Liam, thanks again for your support. I've cloned my repo (I've made for reproduction in my folder, in order to assure it was working, before submitting to you.), tried installing the dev packages, got a dependency error, though (please, find the logs below). I was able to install the dependencies (first the @ionic/angular, then @ionic/angular-server with --force argument). I've got some errors, deleted node_modules and package-lock.json, run npm install again, and in order for it to work I had to use --force argument too. Then it installed correctly, the code run, but so far, I'm still getting this error in browser console: Uncaught SyntaxError: Strict mode code may not include a with statement. I'm also getting this error in server console:

TypeError: Cannot read properties of null (reading 'whenDefined') The ion-menu-button doesn't show its icon and also is not working. I'm pretty sure that's not my code fault, since with regular npm run start command it does.

Please let me know if you need anything else from me, and again, thanks for your support.

ps.: I've updated the repo with latest changes

---------- npm install full log

0 verbose cli [
0 verbose cli   '/home/dina/.nvm/versions/node/v16.13.2/bin/node',
0 verbose cli   '/home/dina/.nvm/versions/node/v16.13.2/bin/npm',
0 verbose cli   'install',
0 verbose cli   '@ionic/[email protected]',
0 verbose cli   '@ionic/[email protected]'
0 verbose cli ]
1 info using [email protected]
2 info using [email protected]
3 timing npm:load:whichnode Completed in 0ms
4 timing config:load:defaults Completed in 1ms
5 timing config:load:file:/home/dina/.nvm/versions/node/v16.13.2/lib/node_modules/npm/npmrc Completed in 1ms
6 timing config:load:builtin Completed in 1ms
7 timing config:load:cli Completed in 0ms
8 timing config:load:env Completed in 1ms
9 timing config:load:file:/home/dina/dev/apps/confraria-do-temaki/confraria-do-temaki-app/test repo/confraria/.npmrc Completed in 0ms
10 timing config:load:project Completed in 0ms
11 timing config:load:file:/home/dina/.npmrc Completed in 0ms
12 timing config:load:user Completed in 0ms
13 timing config:load:file:/home/dina/.nvm/versions/node/v16.13.2/etc/npmrc Completed in 0ms
14 timing config:load:global Completed in 1ms
15 timing config:load:validate Completed in 0ms
16 timing config:load:credentials Completed in 0ms
17 timing config:load:setEnvs Completed in 1ms
18 timing config:load Completed in 5ms
19 timing npm:load:configload Completed in 5ms
20 timing npm:load:setTitle Completed in 0ms
21 timing npm:load:setupLog Completed in 0ms
22 timing config:load:flatten Completed in 2ms
23 timing npm:load:cleanupLog Completed in 1ms
24 timing npm:load:configScope Completed in 0ms
25 timing npm:load:projectScope Completed in 1ms
26 timing npm:load Completed in 9ms
27 timing arborist:ctor Completed in 1ms
28 verbose shrinkwrap failed to load node_modules/.package-lock.json out of date, updated: node_modules
29 timing idealTree:init Completed in 426ms
30 timing idealTree:userRequests Completed in 4ms
31 silly idealTree buildDeps
32 silly fetch manifest @ionic/[email protected]
33 http fetch GET 200 https://registry.npmjs.org/@ionic%2fangular 1070ms (cache revalidated)
34 silly fetch manifest @angular/core@~13.1.0
35 http fetch GET 200 https://registry.npmjs.org/@angular%2fcore 45ms (cache revalidated)
36 silly fetch manifest rxjs@~7.4.0
37 http fetch GET 200 https://registry.npmjs.org/rxjs 41ms (cache revalidated)
38 silly fetch manifest zone.js@~0.11.4
39 http fetch GET 200 https://registry.npmjs.org/zone.js 36ms (cache revalidated)
40 silly fetch manifest @angular/forms@~13.1.0
41 http fetch GET 200 https://registry.npmjs.org/@angular%2fforms 1748ms (cache revalidated)
42 silly fetch manifest @angular/common@~13.1.0
43 http fetch GET 200 https://registry.npmjs.org/@angular%2fcommon 51ms (cache revalidated)
44 silly fetch manifest @angular/platform-browser@~13.1.0
45 http fetch GET 200 https://registry.npmjs.org/@angular%2fplatform-browser 56ms (cache revalidated)
46 silly fetch manifest @angular/animations@~13.1.0
47 http fetch GET 200 https://registry.npmjs.org/@angular%2fanimations 45ms (cache revalidated)
48 silly fetch manifest @angular/router@~13.1.0
49 http fetch GET 200 https://registry.npmjs.org/@angular%2frouter 1714ms (cache revalidated)
50 silly fetch manifest @ionic/[email protected]
51 http fetch GET 200 https://registry.npmjs.org/@ionic%2fangular-server 301ms (cache revalidated)
52 silly fetch manifest @angular/platform-server@~13.1.0
53 http fetch GET 200 https://registry.npmjs.org/@angular%2fplatform-server 48ms (cache revalidated)
54 silly fetch manifest @angular/compiler@~13.1.0
55 http fetch GET 200 https://registry.npmjs.org/@angular%2fcompiler 53ms (cache revalidated)
56 silly fetch manifest @angular/platform-browser-dynamic@~13.1.0
57 http fetch GET 200 https://registry.npmjs.org/@angular%2fplatform-browser-dynamic 45ms (cache revalidated)
58 silly fetch manifest @ionic/angular@^6.0.2
59 timing idealTree Completed in 5751ms
60 timing command:install Completed in 5759ms
61 verbose stack Error: unable to resolve dependency tree
61 verbose stack     at Arborist.[failPeerConflict] (/home/dina/.nvm/versions/node/v16.13.2/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:1356:25)
61 verbose stack     at Arborist.[loadPeerSet] (/home/dina/.nvm/versions/node/v16.13.2/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:1322:34)
61 verbose stack     at async Arborist.[buildDepStep] (/home/dina/.nvm/versions/node/v16.13.2/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:930:11)
61 verbose stack     at async Arborist.buildIdealTree (/home/dina/.nvm/versions/node/v16.13.2/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:216:7)
61 verbose stack     at async Promise.all (index 1)
61 verbose stack     at async Arborist.reify (/home/dina/.nvm/versions/node/v16.13.2/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/reify.js:149:5)
61 verbose stack     at async Install.install (/home/dina/.nvm/versions/node/v16.13.2/lib/node_modules/npm/lib/install.js:170:5)
62 verbose cwd /home/dina/dev/apps/confraria-do-temaki/confraria-do-temaki-app/test repo/confraria
63 verbose Linux 5.13.0-28-generic
64 verbose argv "/home/dina/.nvm/versions/node/v16.13.2/bin/node" "/home/dina/.nvm/versions/node/v16.13.2/bin/npm" "install" "@ionic/[email protected]" "@ionic/[email protected]"
65 verbose node v16.13.2
66 verbose npm  v8.1.2
67 error code ERESOLVE
68 error ERESOLVE unable to resolve dependency tree
69 error
70 error While resolving: [1mconfraria[22m@[1m0.0.0[22m
70 error Found: [1m@ionic/angular[22m@[1m6.0.6-dev.1643984927.f5c5c3c[22m[2m[22m
70 error [2mnode_modules/@ionic/angular[22m
70 error   [1m@ionic/angular[22m@"[1m6.0.6-dev.1643984927.f5c5c3c[22m" from the root project
70 error
70 error Could not resolve dependency:
70 error [35mpeer[39m [1m@ionic/angular[22m@"[1m^6.0.2[22m" from [1m@ionic/angular-server[22m@[1m6.0.6-dev.1643984927.f5c5c3c[22m[2m[22m
70 error [2mnode_modules/@ionic/angular-server[22m
70 error   [1m@ionic/angular-server[22m@"[1m6.0.6-dev.1643984927.f5c5c3c[22m" from the root project
70 error
70 error Fix the upstream dependency conflict, or retry
70 error this command with --force, or --legacy-peer-deps
70 error to accept an incorrect (and potentially broken) dependency resolution.
70 error
70 error See /home/dina/.npm/eresolve-report.txt for a full report.
71 verbose exit 1

[Tvde1]

Any idea when this will be resolved? It's a bummer not to have SSR. Bing apparently doesn't like rendering SPAs and refuses to index my site

[DavidWiesner]

I often use stencil + ionic with SSG what didn't work anymore with ionic 6.

[Tvde1]

It is reproducible by following https://ionicframework.com/blog/ssr-with-angular-universal-and-ionic/ but with the sidemenu starter instead of blank. So you do:

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

Build & serve the application with:

npm run build:ssr
npm run serve:ssr

(npm run dev:ssr is broken because some of the angular.json is missing a development configuration)

4. Visit localhost:4000

When you visit localhost with javascript off (on chrome, Ctrl + Shift + P and run the "disable javascript" action), you will not see the sidebar. If you enable javascript, you will see the sidebar) The error logged to the console is:

unhandledRejection TypeError: Cannot read properties of null (reading 'whenDefined')
    at [hidden]\myApp\dist\app\server\main.js:1:1639791
    at Generator.next (<anonymous>)
    at asyncGeneratorStep ([hidden]\myApp\dist\app\server\main.js:1:3331301)
    at _next ([hidden]\myApp\dist\app\server\main.js:1:3331604)
    at [hidden]\myApp\dist\app\server\main.js:1:3331800
    at new ZoneAwarePromise ([hidden]\myApp\dist\app\server\main.js:1:3303629)
    at [hidden]\myApp\dist\app\server\main.js:1:3331516
    at SplitPane.connectedCallback ([hidden]\myApp\dist\app\server\main.js:1:1639871)
    at safeCall$1 ([hidden]\myApp\dist\app\server\main.js:1:596714)
    at fireConnectedCallback ([hidden]\myApp\dist\app\server\main.js:1:601780)

I hope this helps 🙂

[ngochiencse]

I also encounter this issue just like @Tvde1

[CoooWeee]

I also get: Menu: must have a "content" element to listen for drag events on.

Using:

   "@ionic/angular": "^6.2.9",
    "@angular/common": "^14.2.4",
    "@angular/core": "^14.2.4",
    "@angular/forms": "^14.2.4",
    "@angular/platform-browser": "^14.2.4",
    "@angular/platform-browser-dynamic": "^14.2.4",
    "@angular/router": "^14.2.4",
    "@capacitor/android": "^4.3.0",
    "@capacitor/app": "^4.0.1",
    "@capacitor/core": "^4.3.0",
    "typescript": "^4.8.4",
    "@angular-devkit/build-angular": "^14.2.4",
    "@angular/cli": "^14.2.4",
    "@angular/compiler": "^14.2.4",
    "@angular/compiler-cli": "^14.2.4",

Code:

<ion-split-pane contentId="main-menu">
  <ion-menu contentId="main-menu"  type="overlay">
    <ion-list   >
....
    </ion-list>

  </ion-menu>
  <ion-router-outlet id="main-menu"></ion-router-outlet>
</ion-split-pane>

Inside of "connectedCallback" (controllerion-menu_3.entry.js:112) "contentId" is undefined although I did set it.

[cmoztas]

Any updates?

[agustinhaller]

Hi @liamdebeasi are there any work in progress on this issue? Or maybe an idea on how it should be fixed?

[MilotH2]

I am encountering the same error. The first time the page loads, the ion-menu works, but on refresh it stops working.

package.json "dependencies": { "@angular/animations": "^15.1.1", "@angular/common": "^15.1.1", "@angular/core": "^15.1.1", "@angular/forms": "^15.1.1", "@angular/platform-browser": "^15.1.1", "@angular/platform-browser-dynamic": "^15.1.1", "@angular/platform-server": "^15.1.1", "@angular/router": "^15.1.1", "@byteowls/capacitor-oauth2": "^4.0.0", "@capacitor/android": "4.6.2", "@capacitor/app": "^4.1.1", "@capacitor/core": "^4.6.2", "@capacitor/haptics": "^4.1.0", "@capacitor/ios": "4.6.2", "@capacitor/keyboard": "^4.1.1", "@capacitor/status-bar": "^4.1.1", "@ionic/angular": "^6.5.0", "@ionic/angular-server": "^6.5.0", "@jcesarmobile/ssl-skip": "0.2.0", "@nguniversal/express-engine": "^15.1.0", "express": "^4.15.2", "ionicons": "^6.1.1", "rxjs": "~7.5.0", "tslib": "^2.3.0", "zone.js": "~0.11.4" }, "devDependencies": { "@angular-devkit/build-angular": "^15.1.2", "@angular-eslint/builder": "^15.2.0", "@angular-eslint/eslint-plugin": "^15.2.0", "@angular-eslint/eslint-plugin-template": "^15.2.0", "@angular-eslint/template-parser": "^15.2.0", "@angular/cli": "^15.1.2", "@angular/compiler": "^15.1.1", "@angular/compiler-cli": "^15.1.1", "@angular/language-service": "^15.1.1", "@capacitor/cli": "^4.6.2", "@ionic/angular-toolkit": "^7.0.0", "@nguniversal/builders": "^15.1.0", "@types/express": "^4.17.0", "@types/jasmine": "~4.0.0", "@types/node": "^12.11.1", "@typescript-eslint/eslint-plugin": "5.3.0", "@typescript-eslint/parser": "5.3.0", "eslint": "^7.6.0", "eslint-plugin-import": "2.22.1", "eslint-plugin-jsdoc": "30.7.6", "eslint-plugin-prefer-arrow": "1.2.2", "jasmine-core": "~4.3.0", "jasmine-spec-reporter": "~5.0.0", "karma": "~6.4.0", "karma-chrome-launcher": "~3.1.0", "karma-coverage": "~2.2.0", "karma-coverage-istanbul-reporter": "~3.0.2", "karma-jasmine": "~5.1.0", "karma-jasmine-html-reporter": "~2.0.0", "ts-node": "~8.3.0", "typescript": "~4.8.4" },

ionic info

` Ionic:

Ionic CLI : 6.20.3 (C:\ProgramData\nvm\v18.12.1\node_modules@ionic\cli) Ionic Framework : @ionic/angular 6.5.0 @angular-devkit/build-angular : 15.1.2 @angular-devkit/schematics : 15.1.2 @angular/cli : 15.1.2 @ionic/angular-toolkit : 7.0.0

Capacitor:

Capacitor CLI : 4.6.2 @capacitor/android : 4.6.2 @capacitor/core : 4.6.2 @capacitor/ios : 4.6.2

Utility:

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

System:

NodeJS : v18.12.1 (C:\Program Files\nodejs\node.exe) npm : 8.19.2 OS : Windows 10 `

[liamdebeasi]

Hi there,

Can everyone try the following dev build and let me know if it resolves the issue in your apps?

npm install @ionic/[email protected] @ionic/[email protected]

Please note that this dev build only fixes the Cannot read properties of null (reading 'whenDefined') error. Other Ionic-related SSR errors should be reported in separate issues.

[DavidWiesner]

Yes this works for my case in a pure stencil-ionic app with npm install @ionic/[email protected]. Now the ssg works in this case. I do not have any projects with angular and ssg. Thanks!

[liamdebeasi]

Thanks for the issue. This has been resolved via https://github.com/ionic-team/ionic-framework/pull/26854, and a fix will be available in an upcoming release of Ionic Framework. Please feel free to continue testing the dev build, and let me know if you run into any issues with it.

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