Could not load edge function at '/opt/build/repo/.netlify/edge-functions/angular-ssr/angular-ssr.mjs'

Support
, ,
1

Can’t understand what’s wrong I am doing.

netlify.toml

[build]
  publish = "dist/ng-ssr-netlify/browser"
  command = "ng build --configuration development"
  functions = "./functions"

7:09:19 PM: Netlify Build                                                 
7:09:19 PM: ────────────────────────────────────────────────────────────────
7:09:19 PM: ​
7:09:19 PM: ❯ Version
7:09:19 PM:   @netlify/build 29.51.5
7:09:19 PM: ​
7:09:19 PM: ❯ Flags
7:09:19 PM:   baseRelDir: true
7:09:19 PM:   buildId: 66b37859b2f2690092787b20
7:09:19 PM:   deployId: 66b37859b2f2690092787b22
7:09:19 PM: ​
7:09:19 PM: ❯ Current directory
7:09:19 PM:   /opt/build/repo
7:09:19 PM: ​
7:09:19 PM: ❯ Config file
7:09:19 PM:   /opt/build/repo/netlify.toml
7:09:19 PM: ​
7:09:19 PM: ❯ Context
7:09:19 PM:   production
7:09:19 PM: ​
7:09:19 PM: ❯ Installing plugins
7:09:19 PM:    - @netlify/angular-runtime@2.1.0
7:09:20 PM: ​
7:09:20 PM: ❯ Loading plugins
7:09:20 PM:    - @netlify/angular-runtime@2.1.0 from Netlify app
7:09:21 PM: ​
7:09:21 PM: build.command from netlify.toml                               
7:09:21 PM: ────────────────────────────────────────────────────────────────
7:09:21 PM: ​
7:09:21 PM: $ ng build --configuration development
7:09:22 PM: - Building...
7:09:43 PM: Browser bundles
7:09:43 PM: Initial chunk files     | Names               |  Raw size
7:09:43 PM: main.js                 | main                |   3.97 MB | 
7:09:43 PM: styles.css              | styles              |   1.30 MB | 
7:09:43 PM: chunk-EEABJSPC.js       | -                   | 156.88 kB | 
7:09:43 PM: polyfills.js            | polyfills           | 153.90 kB | 
7:09:43 PM: chunk-EFFYQXWM.js       | -                   |  38.74 kB | 
7:09:43 PM: chunk-CJC764AO.js       | -                   |  18.14 kB | 
7:09:43 PM: chunk-Q2FLM5N2.js       | -                   |   6.40 kB | 
7:09:43 PM: chunk-72JII47O.js       | -                   |   6.35 kB | 
7:09:43 PM: chunk-WME3VOFU.js       | -                   |   5.36 kB | 
7:09:43 PM: chunk-VJ3BX3TR.js       | -                   |   3.82 kB | 
7:09:43 PM:                         | Initial total       |   5.66 MB
7:09:43 PM: Lazy chunk files        | Names               |  Raw size
7:09:43 PM: chunk-V33TK7LY.js       | metamask-sdk        |   2.51 MB | 
7:09:43 PM: chunk-AWBQBRSC.js       | index-es            | 908.11 kB | 
7:09:43 PM: chunk-3RG46CFQ.js       | index               | 676.35 kB | 
7:09:43 PM: chunk-FZ6A7CXX.js       | -                   | 286.15 kB | 
7:09:43 PM: chunk-JGZJ7JGL.js       | index               | 219.68 kB | 
7:09:43 PM: chunk-CLGHGUXZ.js       | index               | 198.07 kB | 
7:09:43 PM: chunk-TGXM3VBP.js       | secp256k1           |  65.40 kB | 
7:09:43 PM: chunk-FIRV2FY6.js       | index               |  58.29 kB | 
7:09:43 PM: chunk-GNABJ3UR.js       | -                   |  21.68 kB | 
7:09:43 PM: chunk-FNXKZGLS.js       | -                   |  13.09 kB | 
7:09:43 PM: chunk-O2XKSE5O.js       | index               |   8.64 kB | 
7:09:43 PM: chunk-NGMGD4HK.js       | index               | 762 bytes | 
7:09:43 PM: chunk-RYFT5BAN.js       | native              | 600 bytes | 
7:09:43 PM: chunk-67HXYGOR.js       | ccip                | 322 bytes | 
7:09:43 PM: Server bundles
7:09:43 PM: Initial chunk files     | Names               |  Raw size
7:09:43 PM: chunk-S2456KOC.mjs      | -                   |   2.66 MB | 
7:09:43 PM: chunk-HOG7AE6Q.mjs      | -                   |   1.85 MB | 
7:09:43 PM: server.mjs              | server              |   1.69 MB | 
7:09:43 PM: polyfills.server.mjs    | polyfills.server    | 572.95 kB | 
7:09:43 PM: chunk-RDQOPTM6.mjs      | -                   | 156.92 kB | 
7:09:43 PM: chunk-FMO7VOCC.mjs      | -                   |  38.77 kB | 
7:09:43 PM: chunk-DHNJNHQG.mjs      | -                   |  18.18 kB | 
7:09:43 PM: chunk-4GNL7BDR.mjs      | -                   |   6.44 kB | 
7:09:43 PM: chunk-564JRJGX.mjs      | -                   |   6.38 kB | 
7:09:43 PM: chunk-HKAIOYIV.mjs      | -                   |   5.39 kB | 
7:09:43 PM: chunk-6NC4FJDQ.mjs      | -                   |   3.88 kB | 
7:09:43 PM: chunk-KCEXWYF2.mjs      | -                   |   3.47 kB | 
7:09:43 PM: chunk-BXDZ7NMP.mjs      | -                   |   2.52 kB | 
7:09:43 PM: main.server.mjs         | main.server         | 421 bytes | 
7:09:43 PM: render-utils.server.mjs | render-utils.server | 367 bytes | 
7:09:43 PM: Lazy chunk files        | Names               |  Raw size
7:09:43 PM: chunk-J4BTY6JL.mjs      | metamask-sdk        |   1.62 MB | 
7:09:43 PM: chunk-PFLUY724.mjs      | index-es            |   1.41 MB | 
7:09:43 PM: chunk-RHTN6X66.mjs      | index               | 626.09 kB | 
7:09:43 PM: chunk-DGDEX4PM.mjs      | -                   | 552.17 kB | 
7:09:43 PM: chunk-2PM6ZL2E.mjs      | index               | 306.39 kB | 
7:09:43 PM: chunk-CU5YHM6J.mjs      | index               | 197.93 kB | 
7:09:43 PM: chunk-2Z3ALZ3B.mjs      | -                   | 154.70 kB | 
7:09:43 PM: chunk-RFL5PTPN.mjs      | -                   | 109.76 kB | 
7:09:43 PM: chunk-ACIBDC5X.mjs      | secp256k1           |  65.43 kB | 
7:09:43 PM: chunk-TPPRS65A.mjs      | index               |  58.33 kB | 
7:09:43 PM: chunk-L4CO6C3K.mjs      | xhr2                |  40.04 kB | 
7:09:43 PM: chunk-EKKUORJU.mjs      | -                   |  21.72 kB | 
7:09:43 PM: chunk-ARLREYO5.mjs      | index               |   8.63 kB | 
7:09:43 PM: chunk-5X56K5D6.mjs      | index               | 918 bytes | 
7:09:43 PM: chunk-DG7IXMEI.mjs      | index               | 799 bytes | 
7:09:43 PM: ...and 1 more lazy chunks files. Use "--verbose" to show all the files.
7:09:43 PM: Output location: /opt/build/repo/dist/ng-ssr-netlify
7:09:43 PM: Application bundle generation complete. [21.682 seconds]
7:09:44 PM: ​
7:09:44 PM: (build.command completed in 22.3s)
7:09:44 PM: Writing Angular SSR Edge Function ...
7:09:44 PM: ​
7:09:44 PM: Functions bundling                                            
7:09:44 PM: ────────────────────────────────────────────────────────────────
7:09:44 PM: ​
7:09:44 PM: The Netlify Functions setting targets a non-existing directory: functions
7:09:44 PM: ​
7:09:44 PM: (Functions bundling completed in 2ms)
7:09:44 PM: ​
7:09:44 PM: Edge Functions bundling                                       
7:09:44 PM: ────────────────────────────────────────────────────────────────
7:09:44 PM: ​
7:09:44 PM: Packaging Edge Functions from .netlify/edge-functions directory:
7:09:44 PM:  - angular-ssr
7:09:53 PM: TypeError: Cannot set properties of undefined (setting 'target')
7:09:53 PM:     at setTarget (ext:deno_web/02_event.js:98:29)
7:09:53 PM:     at dispatchEvent (ext:deno_web/02_event.js:1031:7)
7:09:53 PM:     at requestProviders (file:///opt/build/repo/dist/ng-ssr-netlify/server/chunk-S2456KOC.mjs:63931:10)
7:09:53 PM:     at request (file:///opt/build/repo/dist/ng-ssr-netlify/server/chunk-S2456KOC.mjs:63939:25)
7:09:53 PM:     at createStore (file:///opt/build/repo/dist/ng-ssr-netlify/server/chunk-S2456KOC.mjs:63948:17)
7:09:53 PM:     at createConfig (file:///opt/build/repo/dist/ng-ssr-netlify/server/chunk-S2456KOC.mjs:64505:82)
7:09:53 PM:     at file:///opt/build/repo/dist/ng-ssr-netlify/server/chunk-S2456KOC.mjs:65737:14
7:09:54 PM: Failed during stage 'building site': Build script returned non-zero exit code: 2 (https://ntl.fyi/exit-code-2)
7:09:54 PM: ​
7:09:54 PM: Bundling of edge function failed                              
7:09:54 PM: ────────────────────────────────────────────────────────────────
7:09:54 PM: ​
7:09:54 PM:   Error message
7:09:54 PM:   Could not load edge function at '/opt/build/repo/.netlify/edge-functions/angular-ssr/angular-ssr.mjs'. More on the Edge Functions API at https://ntl.fyi/edge-api.
7:09:54 PM: ​
7:09:54 PM:   Error location
7:09:54 PM:   While bundling edge function
7:09:54 PM: ​
7:09:54 PM:   Resolved config
7:09:54 PM:   build:
7:09:54 PM:     command: ng build --configuration development
7:09:54 PM:     commandOrigin: config
7:09:54 PM:     publish: /opt/build/repo/dist/ng-ssr-netlify/browser
7:09:54 PM:     publishOrigin: config
7:09:54 PM:   functionsDirectory: /opt/build/repo/functions
7:09:54 PM:   plugins:
7:09:54 PM:     - inputs: {}
7:09:54 PM:       origin: ui
7:09:54 PM:       package: '@netlify/angular-runtime'
7:09:54 PM: Build failed due to a user error: Build script returned non-zero exit code: 2
7:09:54 PM: Failing build: Failed to build site
7:09:54 PM: Finished processing build request in 1m29.206s
2

Hi there, glad you found us :wave:t6: before we can help you, we need a little more information on the issues you are facing.

First, have you looked through this resource? It is a compilation of all of our build and deploy resources. This is a good starting point.

If you have worked through those guides and are still encountering issues please share the following information:

  • the name of your build instance: “example-jones.netlify.com”
  • what you have already tried
  • any error messages you have received in your terminal window or in the developer console
3

@SamO Thanks for your response.

I am using Angular 18 (SSR). I want to build and deploy via netlify.

here is my netlify.toml file what I placed in the root folder

[build]
  publish = "dist/app-ssr-netlify/browser"
  command = "ng build --configuration development"
  functions = "./functions"

server.ts

import { APP_BASE_HREF } from '@angular/common';
import { CommonEngine } from '@angular/ssr';
import express from 'express';
import { fileURLToPath } from 'node:url';
import { dirname, join, resolve } from 'node:path';
import AppServerModule from './src/main.server';

// The Express app is exported so that it can be used by serverless Functions.
export function app(): express.Express {
  const server = express();
  const serverDistFolder = dirname(fileURLToPath(import.meta.url));
  const browserDistFolder = resolve(serverDistFolder, '../browser');
  const indexHtml = join(serverDistFolder, 'index.server.html');

  const commonEngine = new CommonEngine();

  server.set('view engine', 'html');
  server.set('views', browserDistFolder);

  // Example Express Rest API endpoints
  // server.get('/api/**', (req, res) => { });
  // Serve static files from /browser
  server.get('**', express.static(browserDistFolder, {
    maxAge: '1y',
    index: 'index.html',
  }));

  // All regular routes use the Angular engine
  server.get('**', (req, res, next) => {
    const { protocol, originalUrl, baseUrl, headers } = req;

    commonEngine
      .render({
        bootstrap: AppServerModule,
        documentFilePath: indexHtml,
        url: `${protocol}://${headers.host}${originalUrl}`,
        publicPath: browserDistFolder,
        providers: [{ provide: APP_BASE_HREF, useValue: baseUrl },{ provide: 'USER_AGENT', useValue: req.headers['user-agent'] }],
      })
      .then((html) => res.send(html))
      .catch((err) => next(err));
  });

  return server;
}

// export function run(): void {
//   const port = process.env['PORT'] || 4000;

//   // Start up the Node server
//   const server = app();
//   server.listen(port, () => {
//     console.log(`Node Express server listening on http://localhost:${port}`);
//   });
// }

// run();

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "app-ssr-netlify": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss",
          "standalone": false
        },
        "@schematics/angular:directive": {
          "standalone": false
        },
        "@schematics/angular:pipe": {
          "standalone": false
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:application",
          "options": {
            "outputPath": "dist/app-ssr-netlify",
            "index": "src/index.html",
            "browser": "src/main.ts",
            "polyfills": [
              "zone.js",
              "src/polyfills.ts"
            ],
            "tsConfig": "tsconfig.app.json",
            "inlineStyleLanguage": "scss",
            "assets": [
              "src/assets/images/svg-icons/token.svg",
              "src/assets",
              "src/sitemap.xml",
              {
                "glob": "**/*",
                "input": "public"
              }
            ],
            "styles": [
              "src/styles.scss"
            ],
            "stylePreprocessorOptions": {
              "includePaths": [
                "src/assets/scss"
              ] 
            },
            "scripts": [],
            "server": "src/main.server.ts",
            "prerender": true,
            "ssr": {
              "entry": "server.ts"
            }
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "1mb",
                  "maximumError": "3MB"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "1mb",
                  "maximumError": "3MB"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "outputHashing": "all"
            },
            "staging": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "1mb",
                  "maximumError": "3MB"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "1mb",
                  "maximumError": "3mb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.stag.ts"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "optimization": false,
              "extractLicenses": false,
              "sourceMap": true
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "buildTarget": "app-ssr-netlify:build:production"
            },
            "staging": {
              "buildTarget": "app-ssr-netlify:build:staging"
            },
            "development": {
              "buildTarget": "app-ssr-netlify:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n"
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "polyfills": [
              "zone.js",
              "zone.js/testing",
              "src/polyfills.ts"
            ],
            "tsConfig": "tsconfig.spec.json",
            "inlineStyleLanguage": "scss",
            "assets": [
              "src/assets/images/svg-icons/token.svg",
              "src/assets",
              {
                "glob": "**/*",
                "input": "public"
              }
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          }
        },
        "lint": {
          "builder": "@angular-eslint/builder:lint",
          "options": {
            "lintFilePatterns": [
              "src/**/*.ts",
              "src/**/*.html"
            ]
          }
        }
      }
    }
  },
  "cli": {
    "analytics": false,
    "schematicCollections": [
      "@angular-eslint/schematics"
    ]
  }
}

As it is an SSR build so netlify using Edge Functions bundling and here I am getting error.

12:38:04 AM: chunk-XTL3PYZ3.mjs      | -                   |  21.72 kB | 
12:38:04 AM: chunk-3XZFIYNH.mjs      | index               |   8.63 kB | 
12:38:04 AM: chunk-BXAREUAP.mjs      | index               | 918 bytes | 
12:38:04 AM: chunk-OBMST6ZX.mjs      | index               | 799 bytes | 
12:38:04 AM: ...and 1 more lazy chunks files. Use "--verbose" to show all the files.
12:38:04 AM: Prerendered 6 static routes.
12:38:04 AM: Output location: /opt/build/repo/dist/app-ssr-netlify
12:38:04 AM: Application bundle generation complete. [25.148 seconds]
12:38:05 AM: ​
12:38:05 AM: (build.command completed in 25.8s)
12:38:05 AM: Writing Angular SSR Edge Function ...
12:38:05 AM: ​
12:38:05 AM: Functions bundling                                            
12:38:05 AM: ────────────────────────────────────────────────────────────────
12:38:05 AM: ​
12:38:05 AM: The Netlify Functions setting targets a non-existing directory: functions
12:38:05 AM: ​
12:38:05 AM: (Functions bundling completed in 2ms)
12:38:05 AM: ​
12:38:05 AM: Edge Functions bundling                                       
12:38:05 AM: ────────────────────────────────────────────────────────────────
12:38:05 AM: ​
12:38:05 AM: Packaging Edge Functions from .netlify/edge-functions directory:
12:38:05 AM:  - angular-ssr
12:38:14 AM: Failed during stage 'building site': Build script returned non-zero exit code: 2 (https://ntl.fyi/exit-code-2)
12:38:14 AM: TypeError: Cannot set properties of undefined (setting 'target')
12:38:14 AM:     at setTarget (ext:deno_web/02_event.js:98:29)
12:38:14 AM:     at dispatchEvent (ext:deno_web/02_event.js:1031:7)
12:38:14 AM:     at requestProviders (file:///opt/build/repo/dist/app-ssr-netlify/server/chunk-QYUEOMWF.mjs:58550:10)
12:38:14 AM:     at request (file:///opt/build/repo/dist/app-ssr-netlify/server/chunk-QYUEOMWF.mjs:58558:25)
12:38:14 AM:     at createStore (file:///opt/build/repo/dist/app-ssr-netlify/server/chunk-QYUEOMWF.mjs:58567:17)
12:38:14 AM:     at createConfig (file:///opt/build/repo/dist/app-ssr-netlify/server/chunk-QYUEOMWF.mjs:59124:82)
12:38:14 AM:     at file:///opt/build/repo/dist/app-ssr-netlify/server/chunk-QYUEOMWF.mjs:60356:14
12:38:14 AM: ​
12:38:14 AM: Bundling of edge function failed                              
12:38:14 AM: ────────────────────────────────────────────────────────────────
12:38:14 AM: ​
12:38:14 AM:   Error message
12:38:14 AM:   Could not load edge function at '/opt/build/repo/.netlify/edge-functions/angular-ssr/angular-ssr.mjs'. More on the Edge Functions API at https://ntl.fyi/edge-api.
12:38:14 AM: ​
12:38:14 AM:   Error location
12:38:14 AM:   While bundling edge function
12:38:14 AM: ​
12:38:14 AM:   Resolved config
12:38:14 AM:   build:
12:38:14 AM:     command: ng build --configuration development
12:38:14 AM:     commandOrigin: config
12:38:14 AM:     environment:
12:38:14 AM:       - CI
12:38:14 AM:     publish: /opt/build/repo/dist/app-ssr-netlify/browser
12:38:14 AM:     publishOrigin: config
12:38:14 AM:   functionsDirectory: /opt/build/repo/functions
12:38:14 AM:   plugins:
12:38:14 AM:     - inputs: {}
12:38:14 AM:       origin: ui
12:38:14 AM:       package: '@netlify/angular-runtime'
12:38:14 AM: Build failed due to a user error: Build script returned non-zero exit code: 2
12:38:14 AM: Failing build: Failed to build site
12:38:14 AM: Finished processing build request in 1m30.875s

Do I need to create a custom edge function? I really can’t understand what to do.
the SSR will work properly if the netlify run the dist/app-ssr-netlify/server/server.mjs

Why this error is coming?

12:38:05 AM: Packaging Edge Functions from .netlify/edge-functions directory:
12:38:05 AM:  - angular-ssr
12:38:14 AM: Failed during stage 'building site': Build script returned non-zero exit code: 2 (https://ntl.fyi/exit-code-2)
12:38:14 AM: TypeError: Cannot set properties of undefined (setting 'target')
4

My best guess is that you or one of your dependencies is using: mipd - npm. That library has a function which is trying to emit a custom event on window: mipd/src/utils.ts at main · wevm/mipd (github.com). Then that call is calling setTarget function. But since this is happening inside server-side environment where window is undefined, this is failing.

You’d have to try wrapping your server-side functionality info if (window) or check why this library is being used and try to eliminate that.