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.

[alan-agius4]

This seems like a bug but we'll need to look at a reproduction to find and fix the problem. Can you setup a minimal repro please?

You can read here why this is needed. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

This might be related to your directory structure so its really important to get an accurate repro to diagnose this.