Angular Universal: SyntaxError: Unexpected token import

[saoron]

Update by @valorkin : blocked by Angular-CLI angular/angular-cli#7200

Hi Guys, Thank you for your great work!

I'm trying to make ngx-bootstrap work with Universal but getting this error when trying to run:

 node_modules/ngx-bootstrap/modal/modal-backdrop.component.js:1
(function (exports, require, module, __filename, __dirname) { import { Component, ElementRef, Renderer } from '@angular/core';
                                                              ^^^^^^
SyntaxError: Unexpected token import
    at createScript (vm.js:53:10)
    at Object.runInThisContext (vm.js:95:10)
    at Module._compile (module.js:543:28)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at Object.IBu+ (/private/var/folders/7w/snfpnc0x7yd302z6rsfs69zc0000gn/T/fbfn_10215rsiZqtRl494A/dist-server/main.a7ad34b20e2d30c271dd.bundle.js:1:146690)

Any suggestions?

[adrianolsk]

I am also facing this problem.

[ali-habibzadeh]

Same issue here too

[dafabulousteach]

@saoron What version are you using?

[saoron]

This is happening both on 1.8.1 and on the latest beta 2.0.0-beta.3.

[dafabulousteach]

One option is to eject the webpack and whitelist ngx-bootstrap. But then that would defeat the purpose of using ang-cli. ngx-translate example

[dafabulousteach]

I am using Angular 4 + universal. I followed the steps listed here to build universal code from my angular 4 codebase. On my end, this occurs after I use ang-cli to build my server code and then run node server.js

[neilhem]

If you are using Angular-CLI angular/angular-cli#7200

[valorkin]

unfortunately, it is ng-cli issue, so we will have to wait for fix
error is complaining about es6 modules style
it means than ngx-bootstap was not compiled by cli

[valorkin]

@neilhem thanks for link!

[1thrasher]

So, according to @Toxicable it would appear that this, indeed, will fall on the libraries, not the cli. See here, and the few subsequent comments: angular/angular-cli#7200 (comment)

[hesampour]

I have the same problem. As I saw angular universal have problem with modal components. I tried ngx bootstrap modal and angular material modal. both had problem with universal. even with asp .net core universal problem exist. remove all modals component to fix the error

[valorkin]

We will publish fix next week, when qa out of vacation.
You can verify fix here: https://ngx-universal.herokuapp.com/modals

[longhoang2984]

I still met this issue in version: 1.9.0

Which version did you fix?

[IlyaSurmay]

@longhoang2984 angular unniversal support was added in 2.0.0-beta.8

[aukris]

I just upgraded ngx-bootstrap to 2.0.0-beta.8 (confirmed it by checking node modules) But I still get a carousel error
node_modules/ngx-bootstrap/carousel/carousel.component.js:18

import { Component, EventEmitter, Input, NgZone, Output } from angular/core;
^^^^^^

SyntaxError: Unexpected token import

Can someone help me fix this ?

[valorkin]

I was explaining in similar issue, nodejs doest support es6 import style, so files should be compiled with webpack or typescript before using in node.
Fully working sample can be found here https://github.com/valor-software/ngx-bootstrap/tree/development/scripts/universal

[valorkin]

This is why such questions should be on stack overwflow, so ppl can google it

[AnthonyNahas]

@abhijithmannath take a look on this thread

solving angular universal issues

[gg-gg-v1]

@dafabulousteach Could you please let me know how did you solve this issue ?

Thanks !

[dafabulousteach]

@b6791 Unfortunately, I never did solve this. But seeing that there has been a new release to ang-cli, there might be a fix. On the other hand, the problem is with ngx-bootstrap itself. Sorry I couldn't help.

[gg-gg-v1]

@dafabulousteach Anyway no problem thanks for the reply.

[nimatrazmjo]

Guys I have the same problem any suggestion :

Error:

function (exports, require, module, __filename, __dirname) { export { BsModalRef } from './bs-modal-ref.service';
                                                              ^^^^^^
SyntaxError: Unexpected token export
    at new Script (vm.js:74:7)
    at createScript (vm.js:246:10)
    at Object.runInThisContext (vm.js:298:10)
    at Module._compile (internal/modules/cjs/loader.js:657:28)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:20:18)

package.json:

"ngx-bootstrap": "2.0.5", angular version 6.2.3

[ohabash]

Installing babel with the 1-7 instruction did not work for me... Do you recommend any troubleshooting steps?
sebholstein/angular-google-maps#1052

[RahulChouhan96]

We will publish fix next week, when qa out of vacation.
You can verify fix here: https://ngx-universal.herokuapp.com/modals

It is giving 404

[RahulChouhan96]

I was explaining in similar issue, nodejs doest support es6 import style, so files should be compiled with webpack or typescript before using in node.
Fully working sample can be found here https://github.com/valor-software/ngx-bootstrap/tree/development/scripts/universal

This page is giving 404

[RahulChouhan96]

I have been facing this problem for a very long. I use to do a workaround to bypass this. But finally, I have fixed this. So, here is the solution.

Where did I find this problem:

ngx-bootstrap

Problem:

This npm package is written in ES6 and is not being transpiled to support older environments like ES5. So, it does not understand the keyword like export or import.

Solution

To make the package compatible with our environment, we have to transpile it by ourselves. I did it using webpack and babel-loader to transpile ngx-bootstrap package.

Steps:

1. Get your universal build ready.

2. Install webpack and loaders packages related to babel using this command,

   npm install -D babel-loader @babel/core @babel/preset-env webpack

3. Create a webpack configuration file webpack.config.js.

4. Add babel-loader like this, and exclude all other packages than ngx-bootstrap.

  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules\/(?!ngx-bootstrap)/
      }
    ]
  }

To understand transpilation and what's going wrong in this issue, I would recommend you to read this nice article How to transpile node modules.