'Unexpected token import' error when used with angular universal rendering (platform - server)

[niravshah]

Am following this guide (https://coursetro.com/posts/code/68/Make-your-Angular-App-SEO-Friendly-(Angular-4-+-Universal) to add server rendering to my angular 2 app created with angular-cli.
It works fine until I add FacebookModule to my app's root module and use the FacebookService. Adding this leads to the above error at the step where I try and run my express server using ts-node.

[ihadeed]

Make sure you follow my comment here: #72 (comment)

Also, try using node instead of ts-node. "Unexpected token 'import'" is an issue with old node version trying to execute es6.

[niravshah]

Thanks Ibby. But this did not help. Do you have a ngx-facebook project using angular platform-server rendering that I can look at?

This is a problem that the angular-cli team have acknowledged as well, I need some help looking for a work around till this is fixed.

ngx-facebook may need a commonjs build as being done by angulartics2 here

[ihadeed]

@niravshah

I don't have a current project that uses SSR. I tried it before, though.

Did you try the umd build that is published here? you can find it in dist/umd. So basically you'd import from ngx-facebook/dist/umd instead of ngx-facebook. Compilers should pick that up automatically though from here. So I'm not sure if that would actually help.

I can publish a commonjs build if that would fix the issue.

[niravshah]

👍 that worked like a charm !

thanks ibby. ⭐️

[matheusdavidson]

Tried to import from ngx-facebook/dist/umd, but i'm getting many warnings like this:

WARNING in ./node_modules/ngx-facebook/dist/umd/facebook.module.js
3:24-31 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

[kartikbb]

I am importing ngx-facebook using
import { FacebookModule } from 'ngx-facebook/dist/umd';

Now when I build, I also get the same warning as indicated above by matheusdavidson but build completes.

And then when I fire my node command for running universal app, I get the below error

var v = factory(!(function webpackMissingModule() { var e = new Error("Cannot find module ".""); e.code = 'MODULE_NOT_FOUND'; throw e; }()), exports);
^

Error: Cannot find module "."
    at webpackMissingModule (d:\Dist\server.js:9637:69)
    at a.../../../../ngx-facebook/dist/umd/components/fb-comments/fb-comments.js.Object.defineProperty.value (d:\Dist\server.js:9637:147)
    at Object.../../../../ngx-facebook/dist/umd/components/fb-comments/fb-comments.js (d:\Dist\server.js:9646:3)
    at __webpack_require__ (d:\Dist\server.js:172:30)
    at Object.../../../../ngx-facebook/dist/umd/components/fb-comments/fb-comments.ngfactory.js (d:\Dist\server.js:9741:10)
    at __webpack_require__ (d:\Dist\server.js:172:30)
    at Object.../../../../../src/app/components/content/content.component.ngfactory.js (d:\Dist\server.js:1252:11)
    at __webpack_require__ (d:\Dist\server.js:172:30)
    at Object.../../../../../src/app/app.server.module.ngfactory.js (d:\Dist\server.js:294:10)
    at __webpack_require__ (d:\Dist\server.js:172:30)

[kartikbb]

Hi,
Anything on this? This has become a critical bug for us.

[hguaymas]

@kartikbb did you solve this? I have the same problem.

[marcinwojtach]

Hey, I've encountered the same problem..
I did a workaround for this solution, inspired by jw-angular-socials-plugins https://jasonwatmore.com/post/2018/06/01/angular-2-social-sharing-buttons-for-facebook-google-plus-twitter-linkedin-and-pinterest and it's working with SSR.
Add facebook initialization to your app.component constructor providing your appId.
constructor() { if (isPlatformBrowser(this.platformId)) { if (!window['fbAsyncInit']) { window['fbAsyncInit'] = function () { window['FB'].init({ appId: 'appid', xfbml: true, version: 'v2.8' }); }; } } }

and in your AfterViewInit hook
if (isPlatformBrowser(this.platformId)) { window['FB'] && window['FB'].XFBML.parse(); }

and in your index.html paste this script in your head tag:
<script type="text/javascript" src='https://connect.facebook.net/en_US/sdk.js'></script>.

A bit dirty solution but doing the job for now.