\node_modules\ngx-facebook\dist\esm\providers\facebook.js:1 (function (exports, require, module, __filename, __dirname) { import { Injectable } from '@angular/core'; ^^^^^^ SyntaxError: Unexpected token import

[MMilan19]

\node_modules\ngx-facebook\dist\esm\providers\facebook.js:1
(function (exports, require, module, __filename, __dirname) { import { Injectable } from '@angular/core';
^^^^^^
SyntaxError: Unexpected token import
at createScript (vm.js:56:10)
at Object.runInThisContext (vm.js:97:10)
at Module._compile (module.js:542:28)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)

[tomrainedotcom]

Same problem here when trying to run with angular universal

/node_modules/ngx-facebook/dist/esm/providers/facebook.js:1
(function (exports, require, module, __filename, __dirname) { import { Injectable } from '@angular/core';
                                                              ^^^^^^

SyntaxError: Unexpected token import
    at createScript (vm.js:56:10)
    at Object.runInThisContext (vm.js:97:10)
    at Module._compile (module.js:542:28)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/mymac/Code/my-project/dist/server.js:1:301468)

[ihadeed]

Looks like your bundler/compiler doesn't like ES2015 modules, which means you should be using the UMD module that's in the dist/umd directory (instead of dist/esm).

• When are you experiencing this issue?
• What do you use to bundle your app?
• Is there a starter repo I can look at?

[MMilan19]

@ihadeed , I have been working in Angular 4 and after integrate with angular universal and after that I facing this issue. I have commented ngx-facebook component because this plugin also created a problem. Please help me in both cases. Below you find "package.json" file.

package.json

{
"name": "myapplication",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"prestart": "ng build --prod && ngc",
"start": "ts-node src/server.ts --proxy-config proxy.config.json",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"dependencies": {
"@angular/animations": "^4.4.6",
"@angular/common": "^4.0.0",
"@angular/compiler": "^4.0.0",
"@angular/core": "^4.0.0",
"@angular/forms": "^4.0.0",
"@angular/http": "^4.0.0",
"@angular/platform-browser": "^4.0.0",
"@angular/platform-browser-dynamic": "^4.0.0",
"@angular/platform-server": "^4.4.6",
"@angular/router": "^4.0.0",
"@types/jqueryui": "^1.11.35",
"angular2-image-upload": "^0.6.6",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"enhanced-resolve": "^3.3.0",
"jquery": "^3.2.1",
"ng2-bs-dropdown": "^0.7.0",
"ng2-paginate": "^0.1.0",
"ng2-pagination": "^2.0.2",
"ng2-pagination-module": "^1.0.3",
"ngx-bootstrap": "^1.8.1",
"ngx-facebook": "^2.4.0",
"ngx-pagination": "^3.0.3",
"rxjs": "^5.4.1",
"zone.js": "^0.8.14"
},
"devDependencies": {
"@angular/cli": "^1.4.9",
"@angular/compiler-cli": "^4.3.3",
"@angular/language-service": "^4.0.0",
"@types/bootstrap": "^3.3.35",
"@types/googlemaps": "^3.29.2",
"@types/jasmine": "~2.5.53",
"@types/jasminewd2": "~2.0.2",
"@types/jquery": "^3.2.16",
"@types/node": "~6.0.60",
"codelyzer": "~3.0.1",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "^3.3.0",
"tslint": "~5.3.2",
"typescript": "2.3.4"
}
}

[ihadeed]

You're using ts-node without passing a ts-config.json that has "target": "es5", in the compilerOptions. ts-node can't run ES2015 modules.

[MMilan19]

@ihadeed, Sorry I am not getting your point. Could you please give any example?
Here is my tsconfig.json file. may be it can help.

tsconfig.json

{
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"allowJs": false,
"baseUrl": "src",
"noImplicitAny": false,
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2016",
"dom"
]
},
"angularCompilerOptions": {
"genDir": "./dist/ngfactory",
"entryModule": "./src/app/app.module#AppModule"
}
}

[danielsogl]

Reopen the issue if you still have this problem.
I can't reproduce this error with the latest release.

[nch3ng]

have the same issue.

[Big-Silver]

I also faced same issue.
@ihadeed would you provide how to use UMD module instead of ESM?

[Big-Silver]

I fixed that issue using import module and service from ngx-facebook/dist/umd instead of ngx-facebook but after that I got another issue.

Error: Cannot find module '@angular/core'
    at webpackEmptyContext (D:\Work\Project\1851-ui\1851-ui-universal\dist\app\server\main.js:1323:10)
    at D:\Work\Project\1851-ui\1851-ui-universal\dist\app\server\main.js:1374:18
    at ./node_modules/ngx-facebook/dist/umd/components/fb-comments/fb-comments.js (D:\Work\Project\1851-ui\1851-ui-universal\dist\app\server\main.js:1362:17)
    at Object../node_modules/ngx-facebook/dist/umd/components/fb-comments/fb-comments.js (D:\Work\Project\1851-ui\1851-ui-universal\dist\app\server\main.js:1371:3)
    at __webpack_require__ (D:\Work\Project\1851-ui\1851-ui-universal\dist\app\server\main.js:683:30)
    at fn (D:\Work\Project\1851-ui\1851-ui-universal\dist\app\server\main.js:60:20)
    at Object../node_modules/ngx-facebook/dist/umd/components/fb-comments/fb-comments.ngfactory.js (D:\Work\Project\1851-ui\1851-ui-universal\dist\app\server\main.js:1470:10)
    at __webpack_require__ (D:\Work\Project\1851-ui\1851-ui-universal\dist\app\server\main.js:683:30)
    at fn (D:\Work\Project\1851-ui\1851-ui-universal\dist\app\server\main.js:60:20)
    at Object../src/app/common-section/sponsered-content/sponsered-content.component.ngfactory.js (D:\Work\Project\1851-ui\1851-ui-universal\dist\app\server\main.js:5249:10)
    at __webpack_require__ (D:\Work\Project\1851-ui\1851-ui-universal\dist\app\server\main.js:683:30)
    at fn (D:\Work\Project\1851-ui\1851-ui-universal\dist\app\server\main.js:60:20)
    at Object../src/app/pages/details/details.component.ngfactory.js (D:\Work\Project\1851-ui\1851-ui-universal\dist\app\server\main.js:10875:10)
    at __webpack_require__ (D:\Work\Project\1851-ui\1851-ui-universal\dist\app\server\main.js:683:30)
    at fn (D:\Work\Project\1851-ui\1851-ui-universal\dist\app\server\main.js:60:20)
    at Object../src/app/pages/details/details.module.ngfactory.js (D:\Work\Project\1851-ui\1851-ui-universal\dist\app\server\main.js:11276:10)
--
RUNTIME ERROR!
Container will shutdown. A container reload is needed.

[gbertoncelli]

Possible reference: #146
I've solved by importing the library directly from dist/umd

[saifeddinhajji]

ERROR in ./node_modules/ngx-facebook/ivy_ngcc/dist/esm/components/fb-video/fb-video.js 194:12-20
"export 'Renderer' was not found in '@angular/core'