Prerender failing for unexpected identifier #target

[tmk1991]

Command

build

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

Moving to angular/fire 17 from 7.6.1 causes prerender to break. While installing the package leads to the issue, it is unclear on the prerender where the issue is specifically occurring to troubleshoot further. See here: angular/angularfire#3624.

I assume this is due to commonjs and esm packaging. routes-extractor-worker.js:42:143 is failing to load up the application.

Minimal Reproduction

Install @angular/fire 17.1.0
Run ng run retail:prerender

        "prerender": {
          "builder": "@angular-devkit/build-angular:prerender",
          "options": {
            "discoverRoutes": true,
            "browserTarget": "retail:build:production",
            "serverTarget": "retail:server:production",
            "routesFile": "dynamic-routes/routes.txt"
          },
          "configurations": {
            "production": {}
          }
        },

full angular.json:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "retail": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/retail/browser",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": ["src/favicon.ico", "src/assets"],
            "styles": [
              "src/styles.scss",
              "node_modules/ngx-spinner/animations/ball-scale-multiple.css"
            ],
            "scripts": [],
            "allowedCommonJsDependencies": [
              "firebase",
              "iframe-resizer",
              "stopword",
              "@tweenjs/tween.js",
              "@angular/fire", <----- Same result with or without this.
              "@firebase/component",
              "@firebase/functions",
              "@firebase/util",
              "@firebase/firestore",
              "@firebase/app",
              "@firebase/auth",
              "@firebase/performance",
              "@firebase/remote-config"
            ],
            "vendorChunk": true,
            "extractLicenses": false,
            "buildOptimizer": false,
            "sourceMap": true,
            "optimization": false,
            "namedChunks": true
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": true,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "3mb",
                  "maximumError": "4mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "60kb",
                  "maximumError": "70kb"
                }
              ]
            },
            "qa": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.qa.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": true,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "3mb",
                  "maximumError": "4mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "60kb",
                  "maximumError": "70kb"
                }
              ]
            },
            "development": {
              "sourceMap": true,
              "optimization": false
            }
          },
          "defaultConfiguration": ""
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "buildTarget": "retail:build"
          },
          "configurations": {
            "production": {
              "buildTarget": "retail:build:production"
            },
            "development": {}
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "buildTarget": "retail:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": ["src/favicon.ico", "src/assets"],
            "styles": ["src/styles.scss"],
            "scripts": []
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "retail:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "retail:serve:production"
            }
          }
        },
        "server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist/retail/server",
            "main": "server.ts",
            "tsConfig": "tsconfig.server.json",
            "externalDependencies": [
              "@firebase/analytics",
              "@firebase/analytics-types",
              "@firebase/app",
              "@firebase/app-types",
              "@firebase/auth",
              "@firebase/auth-interop-types",
              "@firebase/auth-types",
              "@firebase/component",
              "@firebase/database",
              "@firebase/database-types",
              "@firebase/firestore",
              "@firebase/firestore-types",
              "@firebase/functions",
              "@firebase/functions-types",
              "@firebase/installations",
              "@firebase/installations-types",
              "@firebase/logger",
              "@firebase/messaging",
              "@firebase/messaging-types",
              "@firebase/performance",
              "@firebase/performance-types",
              "@firebase/polyfill",
              "@firebase/remote-config",
              "@firebase/remote-config-types",
              "@firebase/storage",
              "@firebase/storage-types",
              "@firebase/util",
              "@firebase/webchannel-wrapper"
            ],
            "sourceMap": true,
            "optimization": false,
            "buildOptimizer": false
          },
          "configurations": {
            "production": {
              "outputHashing": "media",
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "sourceMap": true,
              "optimization": true,
              "buildOptimizer": true
            }
          },
          "defaultConfiguration": ""
        },
        "serve-ssr": {
          "builder": "@angular-devkit/build-angular:ssr-dev-server",
          "options": {
            "browserTarget": "retail:build",
            "serverTarget": "retail:server"
          },
          "configurations": {
            "production": {
              "browserTarget": "retail:build:production",
              "serverTarget": "retail:server:production"
            }
          }
        },
        "prerender": {
          "builder": "@angular-devkit/build-angular:prerender",
          "options": {
            "discoverRoutes": true,
            "browserTarget": "retail:build:production",
            "serverTarget": "retail:server:production",
            "routesFile": "dynamic-routes/routes.txt"
          },
          "configurations": {
            "production": {}
          }
        },
        "prerender-qa": {
          "builder": "@angular-devkit/build-angular:prerender",
          "options": {
            "discoverRoutes": true,
            "browserTarget": "retail:build:qa",
            "serverTarget": "retail:server:production",
            "routesFile": "dynamic-routes/routes.txt"
          },
          "configurations": {
            "production": {},
            "qa": {},
            "development": {}
          }
        }
      }
    }
  },
  "cli": {
    "analytics": false
  }
}

Exception or Error

SyntaxError: Unexpected identifier '#target'
    at wrapSafe (node:internal/modules/cjs/loader:1486:18)
    at Module._compile (node:internal/modules/cjs/loader:1528:20)
    at Object..js (node:internal/modules/cjs/loader:1706:10)
    at Module.load (node:internal/modules/cjs/loader:1289:32)
    at Function._load (node:internal/modules/cjs/loader:1108:12)
    at TracingChannel.traceSync (node:diagnostics_channel:322:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:220:24)
    at Module.require (node:internal/modules/cjs/loader:1311:12)
    at require (node:internal/modules/helpers:136:16)
    at /Users/xxx/workspace/xxx/website/retail/node_modules/@angular-devkit/build-angular/src/builders/prerender/routes-extractor-worker.js:42:143

Your Environment

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

Angular CLI: 17.3.12
Node: 22.14.0 (Unsupported)
Package Manager: npm 10.9.2
OS: darwin arm64

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

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1703.12
@angular-devkit/build-angular   17.3.12
@angular-devkit/core            17.3.12
@angular-devkit/schematics      17.3.12
@angular/cdk                    17.3.10
@angular/fire                   17.1.0
@schematics/angular             17.3.12
rxjs                            7.8.1
typescript                      5.4.5
zone.js                         0.14.10

Anything else relevant?

Related to angular/fire but might be a red herring... angular/angularfire#3624

Same experience with node v20.18.3

[tmk1991]

If I change prerender to not dynamically discover routes and provide just 1 route, it gives the same error but on a different part of the prerendering

SyntaxError: Unexpected identifier '#target'
    at wrapSafe (node:internal/modules/cjs/loader:1486:18)
    at Module._compile (node:internal/modules/cjs/loader:1528:20)
    at Object..js (node:internal/modules/cjs/loader:1706:10)
    at Module.load (node:internal/modules/cjs/loader:1289:32)
    at Function._load (node:internal/modules/cjs/loader:1108:12)
    at TracingChannel.traceSync (node:diagnostics_channel:322:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:220:24)
    at Module.require (node:internal/modules/cjs/loader:1311:12)
    at require (node:internal/modules/helpers:136:16)
    at /Users/xxx/workspace/xxx/website/retail/node_modules/@angular-devkit/build-angular/src/builders/prerender/render-worker.js:53:178

Prerender code where failure occurs:
async function render({ indexFile, deployUrl, minifyCss, outputPath, serverBundlePath, route, inlineCriticalCss, }) {
const result = {};
const browserIndexOutputPath = path.join(outputPath, indexFile);
const outputFolderPath = path.join(outputPath, route);
const outputIndexPath = path.join(outputFolderPath, 'index.html');
const { ɵSERVER_CONTEXT, AppServerModule, renderModule, renderApplication, default: bootstrapAppFn, } = (await Promise.resolve(${serverBundlePath}).then(s => __importStar(require(s))));

[HaodongMo]

I want to add that I have the same issue, but my project does not have angular/fire installed.