Custom component does not load

Apps (Frontend) Custom Components
1

Question:
Why does the Custom Component (CC) does not load/trigger ?

The images shows, that the CC

  • is available to the instance,
  • is defined in the app
  • is triggered to some sort.

But than throws an error.

image
image2947Ă—1099 351 KB

If i run the App in the AppViewer, the console shows the error:

Error: No element called ExecuteOnLoad is registered.

best,
Jonas

[update]
Error Message from the Builder:

POST https://vacp.onedata.de/api/v1/workflows/29555fd4-9dbf-44a0-97ba-1b5a29aacd46/jobs 500
(anonymous) @ xhr.js:184
t.exports @ xhr.js:13
t.exports @ dispatchRequest.js:52
Promise.then (async)
u.request @ Axios.js:61
(anonymous) @ bind.js:9
(anonymous) @ ExecuteOnLoad.vue:85
s @ runtime.js:45
(anonymous) @ runtime.js:274
S.forEach.t.<computed> @ runtime.js:97
l @ asyncToGenerator.js:3
a @ asyncToGenerator.js:25
(anonymous) @ asyncToGenerator.js:32
(anonymous) @ asyncToGenerator.js:21
executeAction @ ExecuteOnLoad.vue:65
mounted @ ExecuteOnLoad.vue:55
ne @ chunk-vendors.e98a6d9b.js:23
Fn @ chunk-vendors.e98a6d9b.js:23
insert @ chunk-vendors.e98a6d9b.js:23
O @ chunk-vendors.e98a6d9b.js:23
(anonymous) @ chunk-vendors.e98a6d9b.js:23
Pn.t._update @ chunk-vendors.e98a6d9b.js:23
r @ chunk-vendors.e98a6d9b.js:23
nr.get @ chunk-vendors.e98a6d9b.js:23
nr.run @ chunk-vendors.e98a6d9b.js:23
Kn @ chunk-vendors.e98a6d9b.js:23
(anonymous) @ chunk-vendors.e98a6d9b.js:23
ce @ chunk-vendors.e98a6d9b.js:23
Promise.then (async)
oe @ chunk-vendors.e98a6d9b.js:23
pe @ chunk-vendors.e98a6d9b.js:23
t.$nextTick @ chunk-vendors.e98a6d9b.js:23
mounted @ app.d6987eb0.js:1
ne @ chunk-vendors.e98a6d9b.js:23
Fn @ chunk-vendors.e98a6d9b.js:23
insert @ chunk-vendors.e98a6d9b.js:23
O @ chunk-vendors.e98a6d9b.js:23
(anonymous) @ chunk-vendors.e98a6d9b.js:23
Pn.t._update @ chunk-vendors.e98a6d9b.js:23
r @ chunk-vendors.e98a6d9b.js:23
nr.get @ chunk-vendors.e98a6d9b.js:23
nr.run @ chunk-vendors.e98a6d9b.js:23
Kn @ chunk-vendors.e98a6d9b.js:23
(anonymous) @ chunk-vendors.e98a6d9b.js:23
ce @ chunk-vendors.e98a6d9b.js:23
Promise.then (async)
oe @ chunk-vendors.e98a6d9b.js:23
pe @ chunk-vendors.e98a6d9b.js:23
tr @ chunk-vendors.e98a6d9b.js:23
nr.update @ chunk-vendors.e98a6d9b.js:23
vt.notify @ chunk-vendors.e98a6d9b.js:23
set @ chunk-vendors.e98a6d9b.js:23
rr.set @ chunk-vendors.e98a6d9b.js:23
(anonymous) @ app.d6987eb0.js:1
(anonymous) @ chunk-vendors.e98a6d9b.js:23
ce @ chunk-vendors.e98a6d9b.js:23
Promise.then (async)
oe @ chunk-vendors.e98a6d9b.js:23
pe @ chunk-vendors.e98a6d9b.js:23
t.$nextTick @ chunk-vendors.e98a6d9b.js:23
mounted @ app.d6987eb0.js:1
ne @ chunk-vendors.e98a6d9b.js:23
Fn @ chunk-vendors.e98a6d9b.js:23
insert @ chunk-vendors.e98a6d9b.js:23
O @ chunk-vendors.e98a6d9b.js:23
(anonymous) @ chunk-vendors.e98a6d9b.js:23
Pn.t._update @ chunk-vendors.e98a6d9b.js:23
r @ chunk-vendors.e98a6d9b.js:23
nr.get @ chunk-vendors.e98a6d9b.js:23
nr.run @ chunk-vendors.e98a6d9b.js:23
Kn @ chunk-vendors.e98a6d9b.js:23
(anonymous) @ chunk-vendors.e98a6d9b.js:23
ce @ chunk-vendors.e98a6d9b.js:23
Promise.then (async)
oe @ chunk-vendors.e98a6d9b.js:23
pe @ chunk-vendors.e98a6d9b.js:23
tr @ chunk-vendors.e98a6d9b.js:23
nr.update @ chunk-vendors.e98a6d9b.js:23
vt.notify @ chunk-vendors.e98a6d9b.js:23
set @ chunk-vendors.e98a6d9b.js:23
rr.set @ chunk-vendors.e98a6d9b.js:23
navigate @ HorizontalNavigation.vue:47
click @ HorizontalNavigation.vue?9c87:1
ne @ chunk-vendors.e98a6d9b.js:23
n @ chunk-vendors.e98a6d9b.js:23
Qi.o._wrapper @ chunk-vendors.e98a6d9b.js:23

Error message from the App Viewer:

Error: No element called ExecuteOnLoad is registered
    at e.<anonymous> (app.d6987eb0.js:1)
    at f (runtime.js:45)
    at Generator._invoke (runtime.js:271)
    at Generator.forEach.t.<computed> [as next] (runtime.js:97)
    at r (chunk-vendors.e98a6d9b.js:158)
    at s (chunk-vendors.e98a6d9b.js:158)
(anonymous)	@	app.d6987eb0.js:1
f	@	runtime.js:45
(anonymous)	@	runtime.js:271
forEach.t.<computed>	@	runtime.js:97
r	@	chunk-vendors.e98a6d9b.js:158
s	@	chunk-vendors.e98a6d9b.js:158
Promise.then (async)		
r	@	chunk-vendors.e98a6d9b.js:158
s	@	chunk-vendors.e98a6d9b.js:158
(anonymous)	@	chunk-vendors.e98a6d9b.js:158
(anonymous)	@	chunk-vendors.e98a6d9b.js:158
t	@	app.d6987eb0.js:1
(anonymous)	@	app.d6987eb0.js:1
f	@	runtime.js:45
(anonymous)	@	runtime.js:271
forEach.t.<computed>	@	runtime.js:97
r	@	chunk-vendors.e98a6d9b.js:158
s	@	chunk-vendors.e98a6d9b.js:158
(anonymous)	@	chunk-vendors.e98a6d9b.js:158
(anonymous)	@	chunk-vendors.e98a6d9b.js:158
loadCustomElement	@	app.d6987eb0.js:1
rendererComponentName	@	app.d6987eb0.js:1
nr.get	@	chunk-vendors.e98a6d9b.js:23
nr.evaluate	@	chunk-vendors.e98a6d9b.js:23
(anonymous)	@	chunk-vendors.e98a6d9b.js:23
Ga	@	app.d6987eb0.js:1
t._render	@	chunk-vendors.e98a6d9b.js:23
r	@	chunk-vendors.e98a6d9b.js:23
nr.get	@	chunk-vendors.e98a6d9b.js:23
nr	@	chunk-vendors.e98a6d9b.js:23
jn	@	chunk-vendors.e98a6d9b.js:23
Mr.$mount	@	chunk-vendors.e98a6d9b.js:23
init	@	chunk-vendors.e98a6d9b.js:23
p	@	chunk-vendors.e98a6d9b.js:23
f	@	chunk-vendors.e98a6d9b.js:23
b	@	chunk-vendors.e98a6d9b.js:23
f	@	chunk-vendors.e98a6d9b.js:23
b	@	chunk-vendors.e98a6d9b.js:23
f	@	chunk-vendors.e98a6d9b.js:23
(anonymous)	@	chunk-vendors.e98a6d9b.js:23
Pn.t._update	@	chunk-vendors.e98a6d9b.js:23
r	@	chunk-vendors.e98a6d9b.js:23
nr.get	@	chunk-vendors.e98a6d9b.js:23
nr	@	chunk-vendors.e98a6d9b.js:23
jn	@	chunk-vendors.e98a6d9b.js:23
Mr.$mount	@	chunk-vendors.e98a6d9b.js:23
init	@	chunk-vendors.e98a6d9b.js:23
p	@	chunk-vendors.e98a6d9b.js:23
f	@	chunk-vendors.e98a6d9b.js:23
b	@	chunk-vendors.e98a6d9b.js:23
f	@	chunk-vendors.e98a6d9b.js:23
(anonymous)	@	chunk-vendors.e98a6d9b.js:23
Pn.t._update	@	chunk-vendors.e98a6d9b.js:23
r	@	chunk-vendors.e98a6d9b.js:23
nr.get	@	chunk-vendors.e98a6d9b.js:23
nr	@	chunk-vendors.e98a6d9b.js:23
jn	@	chunk-vendors.e98a6d9b.js:23
Mr.$mount	@	chunk-vendors.e98a6d9b.js:23
init	@	chunk-vendors.e98a6d9b.js:23
p	@	chunk-vendors.e98a6d9b.js:23
f	@	chunk-vendors.e98a6d9b.js:23
(anonymous)	@	chunk-vendors.e98a6d9b.js:23
Pn.t._update	@	chunk-vendors.e98a6d9b.js:23
r	@	chunk-vendors.e98a6d9b.js:23
nr.get	@	chunk-vendors.e98a6d9b.js:23
nr	@	chunk-vendors.e98a6d9b.js:23
jn	@	chunk-vendors.e98a6d9b.js:23
Mr.$mount	@	chunk-vendors.e98a6d9b.js:23
init	@	chunk-vendors.e98a6d9b.js:23
p	@	chunk-vendors.e98a6d9b.js:23
f	@	chunk-vendors.e98a6d9b.js:23
L	@	chunk-vendors.e98a6d9b.js:23
A	@	chunk-vendors.e98a6d9b.js:23
(anonymous)	@	chunk-vendors.e98a6d9b.js:23
Pn.t._update	@	chunk-vendors.e98a6d9b.js:23
r	@	chunk-vendors.e98a6d9b.js:23
nr.get	@	chunk-vendors.e98a6d9b.js:23
nr.run	@	chunk-vendors.e98a6d9b.js:23
Kn	@	chunk-vendors.e98a6d9b.js:23
(anonymous)	@	chunk-vendors.e98a6d9b.js:23
ce	@	chunk-vendors.e98a6d9b.js:23
Promise.then (async)		
oe	@	chunk-vendors.e98a6d9b.js:23
pe	@	chunk-vendors.e98a6d9b.js:23
tr	@	chunk-vendors.e98a6d9b.js:23
nr.update	@	chunk-vendors.e98a6d9b.js:23
vt.notify	@	chunk-vendors.e98a6d9b.js:23
set	@	chunk-vendors.e98a6d9b.js:23
rr.set	@	chunk-vendors.e98a6d9b.js:23
navigate	@	HorizontalNavigation.vue:47
click	@	HorizontalNavigation.vue?9c87:1
ne	@	chunk-vendors.e98a6d9b.js:23
n	@	chunk-vendors.e98a6d9b.js:23
Qi.o._wrapper	@	chunk-vendors.e98a6d9b.js:23
2

Can you post the rest of the error in the console? And perhaps the config of the CC in the JSON? I can see a “500” there, and the name of the CC should be correct. Perhaps it fails due to another error and only shows the “not registered” due to generic error handling or something

3

[orginal post updated]

4

Solved
I had a incorrect configuration of the CC.
Mistake 1) I did fully comment the variableAssignments object in the endpoints config. The script however does not have a null check.

"config": {
    "workflowId": "xyz",
    "projectId": "zvy",
    "variableAssignments": [ 
    ]
  }

Mistake 2) The variable isTriggeredVariable has to be defined with at least the default: false.

{
  "id": "zzz",
  "type": "custom",
  "renderer": "ExecuteOnLoad",
  "config": {
    "endpoint": "xyz", // endpoint ID of the action to execute
    "isTriggeredVariable": false 
  }
}

Thank You @johannesheininger for figuring this out.

1 Like