Error logs on SSR #320

abbasdawood · 2018-08-04T12:07:22Z

I am submitting a

Bug Report

What is the expected behavior?

No errors in error log related to Share buttons

What is the current behavior?

Following errors show up in PM2 logs for the web app running on node server

ERROR TypeError: Cannot read property 'type' of undefined
    at TokenStream.LA (/home/ubuntu/iifa/node_modules/domino/lib/cssparser.js:810:30)
     at TokenStream.advance (/home/ubuntu/iifa/node_modules/domino/lib/cssparser.js:683:20)
     at Parser._readDeclarations (/home/ubuntu/iifa/node_modules/domino/lib/cssparser.js:3402:42)
     at Parser.parseStyleAttribute (/home/ubuntu/iifa/node_modules/domino/lib/cssparser.js:3581:22)
     at parseStyles (/home/ubuntu/iifa/node_modules/domino/lib/CSSStyleDeclaration.js:23:10)
     at CSSStyleDeclaration.value (/home/ubuntu/iifa/node_modules/domino/lib/CSSStyleDeclaration.js:142:22)
     at new ExpandButtonComponent (/home/ubuntu/iifa/node_modules/@ngx-share/buttons/bundles/ngx-share-buttons.umd.js:117:32)
     at createClass (/home/ubuntu/iifa/node_modules/@angular/core/bundles/core.umd.js:12519:20)
    at createDirectiveInstance (/home/ubuntu/iifa/node_modules/@angular/core/bundles/core.umd.js:12364:37)
     at createViewNodes (/home/ubuntu/iifa/node_modules/@angular/core/bundles/core.umd.js:13822:53)

What are the steps to reproduce?

Build project with ngx-share/buttons & ngx/core and deploy to SSR environment

What is the use-case or motivation for changing an existing behavior?

Reduced number of error logs

Which versions are you using for the following packages?

Angular: 5.2.0
Node: 9.0.0
Angular CLI: 1.7.6
Angular-fontawesome: 0.1.0-10
Share buttons: 5.3.1

Is there anything else we should know?

The text was updated successfully, but these errors were encountered:

MurhafSousli · 2018-08-04T13:14:18Z

It works on SSR! Please add your usage code

Did you try the latest version with rxjs-compat?

andy200486 · 2019-01-16T13:29:31Z

Hi I'm having the same issue with :
Angular:7.1.4
Angular CDK:7.2.1
Angular CLI:7.1.4
Typescript:3.1.6
Ngx-share/button:7.1.1
Ngx-share/buttons:7.1.1
Ngx-share/core:7.1.1

It seems to be at this line :
el.nativeElement.style.setProperty('--button-color', '#FF6651');

in the ngx-share-buttons.umd.js

Can you help me ?

MamaDoudou · 2019-04-17T19:21:34Z

Hello, i'm having a same error with ssr. 
I solved it by using this:
->share.component.ts
import {Component, Inject, OnInit, PLATFORM_ID} from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
....
export class ShareComponent implements OnInit{
isBrowser;
....
constructor(@Inject(PLATFORM_ID) private platformId: Object) { }

ngOnInit() {
    this.isBrowser = isPlatformBrowser(this.platformId);
    .....
 
  }
 ....
}
->share.component.html
<div class="..." *ngIf="isBrowser">
        <share-buttons show="5"></share-buttons>
 </div>
----------------------------
Angular": "^7.2.12"
"@ngx-share/button": "^7.1.2",
"@ngx-share/buttons": "^7.1.2",
"@ngx-share/core": "^7.1.2"


I hope it helps

Judp0m · 2020-12-25T18:35:43Z

I am having the exact same issue on Angular 11.
The buttons won't render in SSR :

ERROR TypeError: Cannot read property 'type' of undefined
    at TokenStream.LA (xxx/server/webpack:/node_modules/domino/lib/cssparser.js:810:1)
    at TokenStream.advance (xxx/server/webpack:/node_modules/domino/lib/cssparser.js:683:1)
    at Parser._readDeclarations (xxx/server/webpack:/node_modules/domino/lib/cssparser.js:3402:1)
    at Parser.parseStyleAttribute (xxx/server/webpack:/node_modules/domino/lib/cssparser.js:3581:1)
    at parseStyles (xxx/server/webpack:/node_modules/domino/lib/CSSStyleDeclaration.js:23:1)
    at CSSStyleDeclaration.value (xxx/server/webpack:/node_modules/domino/lib/CSSStyleDeclaration.js:142:1)
    at new ExpandButton (xxx/server/webpack:/node_modules/ngx-sharebuttons/__ivy_ngcc__/fesm2015/ngx-sharebuttons-buttons.js:202:1)
    at NodeInjectorFactory.ExpandButton_Factory [as factory] (xxx/server/webpack:/node_modules/ngx-sharebuttons/__ivy_ngcc__/fesm2015/ngx-sharebuttons-buttons.js:205:55)
    at getNodeInjectable (xxx/server/webpack:/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:3503:1)
    at instantiateAllDirectives (xxx/server/webpack:/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:9988:1)

This forces us to hide the button for the server via *ngIf="isBrowser" which is not ideal.
@MurhafSousli Could you please re-open this issue since a number of people have reported the issue and are impacted?

Angular: 11.0.5
Node: 9.1.1
Angular CLI: 11.0.5
Angular-fontawesome: 0.8.1
ngx-sharebuttons: 8.0.5

MurhafSousli · 2020-12-25T19:08:35Z

@Judp0m This issue was in a different package, since then the package had changed (now it is ngx-sharebuttons).. now it should not happen, I've already test it with Universal! and I double-checked it again now with the demo, the SSR is working.. try to run the demo project npm run dev:ssr

Judp0m · 2020-12-26T09:07:33Z

Thanks for your quick reply @MurhafSousli

I am using the latest version of all packages as listed in my reply above, and still observe the error when using SSR.
As part of my workflow, I use either npm run dev:ssr or npm build:ssr+npm serve:ssr or npm run prerender.
The result is the same in all cases : if I don't remove the tag (e.g. via *ngIf="isBrowser"), I get the stack trace mentioned in my earlier message in the server side: ERROR TypeError: Cannot read property 'type' of undefined (full stack trace above).
Note1 that the error happens with this:

<share-buttons theme="modern-dark"
  [show]="2"
  [include]="['facebook','twitter','pinterest']"
></share-buttons>

but NOT with this:
<share-buttons theme="modern-dark"
[show]="3"
[include]="['facebook','twitter','pinterest']"

Note2: the same problem appears if trying to use the default style.

Whether or not the error is triggered, the button do not get properly populated, cf missing content in the html class tags:

Not sure what is the cause.
In styles.scss : @import '~ngx-sharebuttons/themes/modern/modern-dark-theme.scss';
In the module I import ShareButtonsModule and ShareIconsModule

I tried using the single <share-button> directly, with the same result.

Keep in mind, everything works well in non-SSR mode! i.e. no problem when using ng serve or AFTER the angular app has booted in SSR. All these issues are present in the prerendered html (e.g. disable javascript in the browser to inspect).

Any help/tip is appreciated.

cleandevcode · 2021-01-06T08:29:17Z

I have a same issue on Angular 9 SSR project.
My original project was Angular 9, Node.js, Express project.
I converted it to SSR.

When I run "npm run dev:ssr", I see this kind of error.

This is my package.json.

"@angular-redux/store": "^10.0.0",
    "@angular/animations": "^9.1.4",
    "@angular/cdk": "^9.2.2",
    "@angular/common": "~9.1.4",
    "@angular/compiler": "~9.1.4",
    "@angular/core": "~9.1.4",
    "@angular/forms": "~9.1.4",
    "@angular/material": "^9.2.2",
    "@angular/platform-browser": "~9.1.4",
    "@angular/platform-browser-dynamic": "~9.1.4",
    "@angular/platform-server": "~9.1.4",
    "@angular/router": "~9.1.4",
    "@nguniversal/express-engine": "^9.1.1",
    "@ngx-translate/core": "^12.1.2",
    "@ngx-translate/http-loader": "^4.0.0",
    "express": "^4.17.1",
    "graphql-js-client": "^0.12.0",
    "jquery": "^3.5.1",
    "js-base64": "^3.6.0",
    "localstorage-polyfill": "^1.0.1",
    "lodash": "^4.17.20",
    "moment": "^2.29.1",
    "ngx-device-detector": "^2.0.1",
    "ngx-slick-carousel": "^0.5.1",
    "ngx-toastr": "^12.0.1",
    "node-fetch": "^2.6.1",
    "npm-run-all": "^4.1.5",
    "redux": "^4.0.5",
    "redux-devtools-extension": "^2.13.8",
    "redux-logger": "^3.0.6",
    "redux-observable": "^1.2.0",
    "rxjs": "~6.5.4",
    "rxjs-compat": "^6.6.3",
    "slick-carousel": "^1.8.1",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"

I`d really appreciate it if anyone can help me.
Regards!

Judp0m · 2021-01-19T05:40:05Z

@MurhafSousli Several of us are running into this issue, as documented above. Can you re-open this issue, or I am happy to create a separate one if you prefer.

angorora · 2021-12-03T09:23:02Z

I am also having this issue, somewhere else it has been confirmed that it is caused by the failure for Universal to set custom properties to the dom

MurhafSousli · 2021-12-03T11:13:57Z

I will check again soon

MurhafSousli · 2022-01-15T18:50:02Z

This should not happen in v10.0.0, please report again if you encounter the same issue

MurhafSousli closed this as completed Aug 16, 2018

maxsv0 mentioned this issue Sep 1, 2019

SSR error, add isBrowser check for share buttons maxsv0/mega-iq-ui#56

Closed

MurhafSousli added need: investigation need: reproduction labels Dec 3, 2021

MurhafSousli reopened this Dec 3, 2021

MurhafSousli mentioned this issue Jan 15, 2022

Update to Angular 13 #578

Merged

MurhafSousli linked a pull request Jan 15, 2022 that will close this issue

Update to Angular 13 #578

Merged

MurhafSousli closed this as completed in #578 Jan 15, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Error logs on SSR #320

Error logs on SSR #320

abbasdawood commented Aug 4, 2018

MurhafSousli commented Aug 4, 2018 •

edited

Loading

andy200486 commented Jan 16, 2019

MamaDoudou commented Apr 17, 2019 •

edited

Loading

Judp0m commented Dec 25, 2020 •

edited

Loading

MurhafSousli commented Dec 25, 2020 •

edited

Loading

Judp0m commented Dec 26, 2020

cleandevcode commented Jan 6, 2021

Judp0m commented Jan 19, 2021

angorora commented Dec 3, 2021

MurhafSousli commented Dec 3, 2021 •

edited

Loading

MurhafSousli commented Jan 15, 2022

Error logs on SSR #320

Error logs on SSR #320

Comments

abbasdawood commented Aug 4, 2018

I am submitting a

What is the expected behavior?

What is the current behavior?

What are the steps to reproduce?

What is the use-case or motivation for changing an existing behavior?

Which versions are you using for the following packages?

Is there anything else we should know?

MurhafSousli commented Aug 4, 2018 • edited Loading

andy200486 commented Jan 16, 2019

MamaDoudou commented Apr 17, 2019 • edited Loading

Judp0m commented Dec 25, 2020 • edited Loading

MurhafSousli commented Dec 25, 2020 • edited Loading

Judp0m commented Dec 26, 2020

cleandevcode commented Jan 6, 2021

Judp0m commented Jan 19, 2021

angorora commented Dec 3, 2021

MurhafSousli commented Dec 3, 2021 • edited Loading

MurhafSousli commented Jan 15, 2022

MurhafSousli commented Aug 4, 2018 •

edited

Loading

MamaDoudou commented Apr 17, 2019 •

edited

Loading

Judp0m commented Dec 25, 2020 •

edited

Loading

MurhafSousli commented Dec 25, 2020 •

edited

Loading

MurhafSousli commented Dec 3, 2021 •

edited

Loading