Unexpected Identifier import InstantSearch from './lib/InstantSearch';

[shadow1349]

Describe the bug 🐛

I am trying to use angular-instantsearch with @nestjs/ng-universal. Everything builds correctly, but when I try to serve the app I get the following error:

MyApp/node_modules/instantsearch.js/es/index.js:1
import InstantSearch from './lib/InstantSearch';
       ^^^^^^^^^^^^^

SyntaxError: Unexpected identifier
    at Module._compile (internal/modules/cjs/loader.js:721:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:690:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at algoliasearchProxy__default (MyApp/node_modules/angular-instantsearch/bundles/angular-instantsearch.umd.js:2:116)
    at Object.<anonymous> (MyApp/node_modules/angular-instantsearch/bundles/angular-instantsearch.umd.js:5:2)
    at Module._compile (internal/modules/cjs/loader.js:776:30)

here are my dependencies and versions:

  "dependencies": {
    "@angular/animations": "~8.2.7",
    "@angular/cdk": "~8.2.1",
    "@angular/common": "~8.2.7",
    "@angular/compiler": "~8.2.7",
    "@angular/core": "~8.2.7",
    "@angular/fire": "^5.2.1",
    "@angular/forms": "~8.2.7",
    "@angular/material": "^8.2.1",
    "@angular/platform-browser": "~8.2.7",
    "@angular/platform-browser-dynamic": "~8.2.7",
    "@angular/platform-server": "~8.2.7",
    "@angular/router": "~8.2.7",
    "@nestjs/common": "^6.0.0",
    "@nestjs/core": "^6.0.0",
    "@nestjs/ng-universal": "^2.0.1",
    "@nestjs/platform-express": "^6.0.0",
    "@nguniversal/express-engine": "^8.0.0",
    "@nguniversal/module-map-ngfactory-loader": "^8.0.0",
    "@techusolutions/blog-types": "0.0.8",
    "angular-instantsearch": "^3.0.0-beta.4",
    "firebase": ">= 5.5.7 <7",
    "hammerjs": "^2.0.8",
    "instantsearch.js": "^3.6.0",
    "preboot": "^7.0.0",
    "reflect-metadata": "^0.1.13",
    "rxjs": "~6.4.0",
    "sweetalert2": "^8.17.6",
    "tslib": "^1.10.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.803.5",
    "@angular/cli": "~8.3.5",
    "@angular/compiler-cli": "~8.2.7",
    "@angular/language-service": "~8.2.7",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "nodemon": "^1.18.11",
    "protractor": "~5.4.0",
    "rimraf": "^2.6.3",
    "ts-loader": "^5.2.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.5.3",
    "wait-on": "^3.2.0",
    "webpack-cli": "^3.1.0",
    "@angular-devkit/architect": "<0.900 || ^0.900.0-0 || ^9.0.0-0",
    "firebase-tools": "^6.10.0",
    "fuzzy": "^0.1.3",
    "inquirer": "^6.2.2",
    "inquirer-autocomplete-prompt": "^1.0.1"
  }

To Reproduce 🔍

Steps to reproduce the behavior:

1. Start a new angular app
2. run ng add @nestjs/ng-universal
3. install angular-instantsearch
4. add NgAisModule.forRoot() to the imports in your app.module.ts file
5. run npm run build:ssr this should be successful
6. run npm run serve:ssr this will fail with the error above.

Expected behavior 💭

App should run properly with Angular instant search.

Environment:

• OS: mac, osx mojave 10.14.6
• NodeJS: 10.16.0
• NPM: 6.11.3

[Haroenv]

Can you make a reproduction on GitHub? This issue is likely related to your webpack configuration, which doesn't set InstantSearch up for compilation. As you can see from examples like https://github.com/algolia/angular-instantsearch/tree/v3/examples/e-commerce there's no such issue.

[shadow1349]

@Haroenv I have created a repo here: https://github.com/shadow1349/Test-InstantSearch-App-with-AngularUniversal

You will be able to reproduce the error I am seeing. If you have a fix that would be great! Thanks!

[shadow1349]

@Haroenv have you been able to confirm the issue I'm talking about? Looking at the package.json in this project I can see that instantsearch.js version is 2.8.0 which is way behind the latest version

[Haroenv]

Ah I didn't notice that yet, you need to use InstantSearch < 3 for Angular InstantSearch. Angular InstantSearch v3 (now in beta) is compatible with InstantSearch 3

[shadow1349]

@Haroenv I've tried that and it still generates that error at run time. However, interestingly enough it doesn't actually break the page. I'm currently hosting a site using angular-instantsearch in Google Cloud Run using Angular Universal for SEO.

My logs are packed with these errors, but that doesn't actually break anything which is extremely odd.

[Haroenv]

Do you have this? https://github.com/emok032/Algolia-Webpack-Issue/blob/aff59da2fac5b8c40032d8347c2f9e7e9db51384/webpack.server.config.js#L14-L15

see https://github.com/algolia/angular-instantsearch/issues/555 for the same issue

[shadow1349]

I have not whitelisted those packages. I will definitely try that and get back to you! Thanks.