(Solved) DI Error after build on new machine

Help Requests
1

Hello,
I am pretty new to Aurelia, I started work in small company as a Full Stack Developer. Compay internal web based app is using Aurelia as frontend.
Building Aurelia app on my PC complete successfully but after opening page in web browser nothing shows. In DevTools Console I see following error:

Unhandled rejection Error: Error invoking e. Check the inner error for details.
------------------------------------------------
Inner Error:
Message: key/value cannot be null or undefined. Are you trying to inject/register something that doesn't exist with DI?
Inner Error Stack:
Error: key/value cannot be null or undefined. Are you trying to inject/register something that doesn't exist with DI?
    at R (WEB_APP_URL/aurelia-app/angularIntegration.js:8:161655)
    at e.get (WEB_APP_URL/aurelia-app/angularIntegration.js:8:164945)
    at e.pe [as get] (WEB_APP_URL/aurelia-app/angularIntegration.js:1:31833)
    at Object.invoke (WEB_APP_URL/aurelia-app/angularIntegration.js:8:162932)
    at e.invoke (WEB_APP_URL/aurelia-app/angularIntegration.js:8:162126)
    at e.invoke (WEB_APP_URL/aurelia-app/angularIntegration.js:8:165922)
    at e.get (WEB_APP_URL/aurelia-app/angularIntegration.js:1:31117)
    at e.get (WEB_APP_URL/aurelia-app/angularIntegration.js:8:165239)
    at e.pe [as get] (WEB_APP_URL/aurelia-app/angularIntegration.js:1:31833)
    at t.create (WEB_APP_URL/aurelia-app/angularIntegration.js:1:58665)
    at ye (WEB_APP_URL/aurelia-app/angularIntegration.js:1:33126)
    at e.create (WEB_APP_URL/aurelia-app/angularIntegration.js:1:35863)
    at t.create (WEB_APP_URL/aurelia-app/angularIntegration.js:1:58866)
    at WEB_APP_URL/aurelia-app/angularIntegration.js:1:65001
    at d (WEB_APP_URL/aurelia-app/angularIntegration.js:1:325658)
    at D._settlePromiseFromHandler (WEB_APP_URL/aurelia-app/angularIntegration.js:1:298933)
    at D._settlePromise (WEB_APP_URL/aurelia-app/angularIntegration.js:1:299733)
    at D._settlePromise0 (WEB_APP_URL/aurelia-app/angularIntegration.js:1:300432)
    at D._settlePromises (WEB_APP_URL/aurelia-app/angularIntegration.js:1:301759)
    at WEB_APP_URL/aurelia-app/angularIntegration.js:1:255466
    at MutationObserver.<anonymous> (WEB_APP_URL/aurelia-app/angularIntegration.js:1:315271)
End Inner Error Stack
------------------------------------------------

    at R (WEB_APP_URL/aurelia-app/angularIntegration.js:8:161655)
    at e.get (WEB_APP_URL/aurelia-app/angularIntegration.js:8:164945)
    at e.pe [as get] (WEB_APP_URL/aurelia-app/angularIntegration.js:1:31833)
    at Object.invoke (WEB_APP_URL/aurelia-app/angularIntegration.js:8:162932)
    at e.invoke (WEB_APP_URL/aurelia-app/angularIntegration.js:8:162126)
    at e.invoke (WEB_APP_URL/aurelia-app/angularIntegration.js:8:165922)
    at e.get (WEB_APP_URL/aurelia-app/angularIntegration.js:1:31117)
    at e.get (WEB_APP_URL/aurelia-app/angularIntegration.js:8:165239)
    at e.pe [as get] (WEB_APP_URL/aurelia-app/angularIntegration.js:1:31833)
    at t.create (WEB_APP_URL/aurelia-app/angularIntegration.js:1:58665)
    at ye (WEB_APP_URL/aurelia-app/angularIntegration.js:1:33126)
    at e.create (WEB_APP_URL/aurelia-app/angularIntegration.js:1:35863)
    at t.create (WEB_APP_URL/aurelia-app/angularIntegration.js:1:58866)
    at WEB_APP_URL/aurelia-app/angularIntegration.js:1:65001
    at d (WEB_APP_URL/aurelia-app/angularIntegration.js:1:325658)
    at D._settlePromiseFromHandler (WEB_APP_URL/aurelia-app/angularIntegration.js:1:298933)
    at D._settlePromise (WEB_APP_URL/aurelia-app/angularIntegration.js:1:299733)
    at D._settlePromise0 (WEB_APP_URL/aurelia-app/angularIntegration.js:1:300432)
    at D._settlePromises (WEB_APP_URL/aurelia-app/angularIntegration.js:1:301759)
    at WEB_APP_URL/aurelia-app/angularIntegration.js:1:255466
    at MutationObserver.<anonymous> (WEB_APP_URL/aurelia-app/angularIntegration.js:1:315271)
    at new r (WEB_APP_URL/aurelia-app/angularIntegration.js:1:970)
    at e.invoke (WEB_APP_URL/aurelia-app/angularIntegration.js:8:165952)
    at e.get (WEB_APP_URL/aurelia-app/angularIntegration.js:1:31117)
    at e.get (WEB_APP_URL/aurelia-app/angularIntegration.js:8:165239)
    at e.pe [as get] (WEB_APP_URL/aurelia-app/angularIntegration.js:1:31833)
    at t.create (WEB_APP_URL/aurelia-app/angularIntegration.js:1:58665)
    at ye (WEB_APP_URL/aurelia-app/angularIntegration.js:1:33126)
    at e.create (WEB_APP_URL/aurelia-app/angularIntegration.js:1:35863)
    at t.create (WEB_APP_URL/aurelia-app/angularIntegration.js:1:58866)
    at WEB_APP_URL/aurelia-app/angularIntegration.js:1:65001
From previous event:
    at D.H [as _captureStackTrace] (WEB_APP_URL/aurelia-app/angularIntegration.js:1:268765)
    at D._then (WEB_APP_URL/aurelia-app/angularIntegration.js:1:294390)
    at D.then (WEB_APP_URL/aurelia-app/angularIntegration.js:1:292738)
    at Object.p (WEB_APP_URL/aurelia-app/angularIntegration.js:1:454131)
    at window.startAurelia (WEB_APP_URL/aurelia-app/angularIntegration.js:8:24553)
    at eval (eval at globalEval (WEB_APP_URL/lib/jquery/jquery-2.1.1.min.js:2:2536), <anonymous>:1:8)
    at eval (<anonymous>)
    at Function.globalEval (WEB_APP_URL/lib/jquery/jquery-2.1.1.min.js:2:2536)
    at n.fn.init.domManip (WEB_APP_URL/lib/jquery/jquery-2.1.1.min.js:3:17163)
    at n.fn.init.append (WEB_APP_URL/lib/jquery/jquery-2.1.1.min.js:3:14846)
    at n.fn.init.<anonymous> (WEB_APP_URL/lib/jquery/jquery-2.1.1.min.js:3:16206)
    at n.access (WEB_APP_URL/lib/jquery/jquery-2.1.1.min.js:2:30073)
    at n.fn.init.html (WEB_APP_URL/lib/jquery/jquery-2.1.1.min.js:3:15877)
    at WEB_APP_URL/lib/angular-ui-router/angular-ui-router.min.js:7:15233
    at invokeLinkFn (WEB_APP_URL/lib/angular/angular.js:8746:9)
    at nodeLinkFn (WEB_APP_URL/lib/angular/angular.js:8246:11)
    at compositeLinkFn (WEB_APP_URL/lib/angular/angular.js:7637:13)
    at publicLinkFn (WEB_APP_URL/lib/angular/angular.js:7512:30)
    at j (WEB_APP_URL/lib/angular-ui-router/angular-ui-router.min.js:7:14566)
    at WEB_APP_URL/lib/angular-ui-router/angular-ui-router.min.js:7:14890
    at invokeLinkFn (WEB_APP_URL/lib/angular/angular.js:8746:9)
    at nodeLinkFn (WEB_APP_URL/lib/angular/angular.js:8246:11)
    at compositeLinkFn (WEB_APP_URL/lib/angular/angular.js:7637:13)
    at publicLinkFn (WEB_APP_URL/lib/angular/angular.js:7512:30)
    at WEB_APP_URL/lib/angular-ui-router/angular-ui-router.min.js:7:15468
    at invokeLinkFn (WEB_APP_URL/lib/angular/angular.js:8746:9)
    at nodeLinkFn (WEB_APP_URL/lib/angular/angular.js:8246:11)
    at compositeLinkFn (WEB_APP_URL/lib/angular/angular.js:7637:13)

I’ve installed same versions of required packages like previous developer. I tried newest possible versions but result is the same.

After comparing js calls of my build and last production build I think that missing ‘key/value’ on prod is a ‘function Element(){}’.

I have not changed anything in the code, comparing pretty print of both versions seams to prove it:

--- ai.prod.js  2019-03-06 08:32:38.065520961 +0100
+++ ai.dev.js   2019-03-06 08:27:44.660871083 +0100
@@ -12462,4 +12462 @@
-        r.inject = function() {
-            return [o.a, a.b.Element, s.a]
-        }
-        ,
+        r.inject = [o.a, a.b.Element, s.a],
@@ -38634,4 +38631 @@
-        i.inject = function() {
-            return [y.b.Element]
-        }
-        ,
+        i.inject = [y.b.Element],
@@ -38678,4 +38672 @@
-        s.inject = function() {
-            return [y.b.Element, d.a, h.a, v.a.of(b)]
-        }
-        ,
+        s.inject = [y.b.Element, d.a, h.a, v.a.of(b)],

Last two differences are in function called ‘aurelia-i18n/t’

Any tips how to debug it?

1 Like
2

This error typically is when something like this happens:

@inject(undefined)

Which is a result of platform initialization running after the code that reference its main classes, such as DOM.Element. There are few ways to fix this, you could do

class El {
- inject = [...]
+ static inject() {
+   return [...]
+ }
}

Or you could have a separate initialization module:

// pal-initialization.js
import { initialize } from 'aurelia-pal-browser';
initialize();

// main.js
import './pal-initialization';
import 'other-stuff';

The point is to make sure that reference to DOM.Element is ready when the code related to it is evaluated.

1 Like
3

Thanks for quick response
As far as I checked (using grep) there are only few inject in this app and all are in inject() as a function like You suggest.

I explored a bit more attached diff result and aurelia-i18n plugin. Because it looks like inject() as function should be used there. I found out that suggested/used by previous developer version 2.1.2 of aurelia-i18n (and all older too) are mainly using inject = [....] notation. Funny thing - his npm claims that he use exactly this version of aurelia-i18n. After upgrading it to something between 2.2.0 and 2.3.2 - it now works again after build on different machines!

1 Like