angular / angular/angularfire

`Invalid left-hand side of assignment error` when deploying universal app via function hosting

Open
#3,303 2 comments 3 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
7.8k
Forks
2.2k
Avg merge
22h 28m
Merged PRs (30d)
6

Description

### Version info

``` shell
$ ng version

_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/

Angular CLI: 15.0.4
Node: 16.13.0
Package Manager: npm 9.1.2
OS: win32 x64

Angular: 15.0.4
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router

Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1500.4
@angular-devkit/build-angular 15.0.4
@angular-devkit/core 15.0.4
@angular-devkit/schematics 15.0.4
@angular/fire 7.5.0
@nguniversal/builders 15.0.0
@nguniversal/express-engine 15.0.0
@schematics/angular 15.0.4
rxjs 7.5.7
typescript 4.8.4
```

**Other (e.g. Ionic/Cordova, Node, browser, operating system):**

### How to reproduce these conditions

**Failing test unit, Stackblitz demonstrating the problem**

**Steps to set up and reproduce**

1. `ng new `
2. `ng add @nguniversal/express-engine`
3. `ng add @angular/fire`
4. choose Functions option for hosting
5. `ng deploy`

**Sample data and security rules**

### Debug output

** Terminal output **

``` shell
$ ng deploy
Using firebase-tools version 11.19.0
Logged into Firebase as jakehockey10@gmail.com.
✔ Server application bundle generation complete.
✔ Browser application bundle generation complete.

Initial Chunk Files | Names | Raw Size
main.js | main | 5.42 MB |

| Initial Total | 5.42 MB

Build at: 2022-12-22T23:49:41.863Z - Hash: e27452329971ab90 - Time: 20501ms
✔ Copying assets complete.
✔ Index html generation complete.

4 unchanged chunks

Build at: 2022-12-22T23:49:42.663Z - Hash: 8231762c55b7ebaa - Time: 21265ms

Warning: bundle initial exceeded maximum budget. Budget 500.00 kB was not met by 28.71 kB with a total of 528.71 kB.

✔ Prerendering routes to C:\Users\jakeh\Source\Repos\ng-router-animations\dist\ng-router-animations\browser complete.
npm WARN deprecated sourcemap-codec@1.4.8: Please use @jridgewell/sourcemap-codec instead

=== Deploying to 'jakehockey10-fireship'...

i deploying functions, hosting
i functions: preparing codebase default for deployment
i functions: ensuring required API cloudfunctions.googleapis.com is enabled...
i functions: ensuring required API cloudbuild.googleapis.com is enabled...
i artifactregistry: ensuring required API artifactregistry.googleapis.com is enabled...
+ artifactregistry: required API artifactregistry.googleapis.com is enabled
+ functions: required API cloudfunctions.googleapis.com is enabled
+ functions: required API cloudbuild.googleapis.com is enabled
! functions: package.json indicates an outdated version of firebase-functions. Please upgrade using npm install --save firebase-functions@latest in your functions directory.
! functions: Please note that there will be breaking changes when you upgrade.
Error when trying to deploy:
Failed to load function definition from source: Failed to generate manifest from function source: SyntaxError: Invalid left-hand side in assignment
```

** Generated file (dist/ng-router-animations/functions/index.js) **
``` javascript
const functions = require('firebase-functions');

// Increase readability in Cloud Logging
require("firebase-functions/lib/logger/compat");

const expressApp = require('./dist/ng-router-animations/server/main').app();

exports.ssr_ng-router-animations = functions
.region('us-central1')
.runWith({})
.https
.onRequest(expressApp);
```

** Screenshots **
![image](https://user-images.githubusercontent.com/1821383/209245080-a67e29ae-e884-43a8-b0e3-65a19212df6e.png)

### Expected behavior

Expected behavior is: not to create an export variable with hyphens.

### Actual behavior

Actual behavior is: variable with hyphens created, causing invalid javascript.

Contributor guide

Open the contributing guide

Research direction

Start with the generated dist/ng-router-animations/functions/index.js and trace the ng deploy function-generation entry point in the AngularFire deployment integration. Reproduce with a hyphenated app name using the listed Angular CLI and Firebase versions, then verify the generated function export is valid JavaScript and deployment succeeds.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, firebase, typescript
Domain
build-system, cloud
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.