Problem integrating a custom component

codefour · April 11, 2019, 12:21pm

I am using already Dash 0.41.0

I used the Dash boilerplate to create a custom component. When I test the component and start it it usage.py everything works fine.

However, when I build the package (python setup.py sdist) and install it into my production project (my-main-project-env/pip install dist/mycomponent.tar.gz) and start my production dash app (having been upgraded to 0.41.0 as well) I can see the loading screen and then the screen stays blank and in the console I get the following errors:

Error: undefined was not found.
    at Object.resolve (registry.js:16)
    at g (TreeContainer.js:237)
    at TreeContainer.js:225
    at t.exports (_filter.js:7)
    at filter.js:46
    at _dispatchable.js:39
    at e (_curry2.js:25)
    at TreeContainer.js:224
    at TreeContainer.js:176
    at TreeContainer.js:168
Bg @ react-dom@16.8.6.min.js?v=0.22.0&m=1554834449:117
c.callback @ react-dom@16.8.6.min.js?v=0.22.0&m=1554834449:126
Ag @ react-dom@16.8.6.min.js?v=0.22.0&m=1554834449:116
zg @ react-dom@16.8.6.min.js?v=0.22.0&m=1554834449:116
qi @ react-dom@16.8.6.min.js?v=0.22.0&m=1554834449:131
ui @ react-dom@16.8.6.min.js?v=0.22.0&m=1554834449:133
(anonymous) @ react-dom@16.8.6.min.js?v=0.22.0&m=1554834449:158
unstable_runWithPriority @ react@16.8.6.min.js?v=0.22.0&m=1554834449:27
Vc @ react-dom@16.8.6.min.js?v=0.22.0&m=1554834449:158
Sc @ react-dom@16.8.6.min.js?v=0.22.0&m=1554834449:158
Z @ react-dom@16.8.6.min.js?v=0.22.0&m=1554834449:156
Kc @ react-dom@16.8.6.min.js?v=0.22.0&m=1554834449:155
ya @ react-dom@16.8.6.min.js?v=0.22.0&m=1554834449:153
enqueueSetState @ react-dom@16.8.6.min.js?v=0.22.0&m=1554834449:202
t.setState @ react@16.8.6.min.js?v=0.22.0&m=1554834449:20
i.handleChange @ connect.js:302
p @ createStore.js:172
(anonymous) @ index.js:11
dispatch @ applyMiddleware.js:35
p @ index.js:689
(anonymous) @ index.js:858
Promise.then (async)
(anonymous) @ index.js:648
Promise.then (async)
x @ index.js:616
(anonymous) @ index.js:347
(anonymous) @ index.js:8
(anonymous) @ TreeContainer.js:106
value @ Location.react.js:69
value @ Location.react.js:106
qi @ react-dom@16.8.6.min.js?v=0.22.0&m=1554834449:130
ui @ react-dom@16.8.6.min.js?v=0.22.0&m=1554834449:133
(anonymous) @ react-dom@16.8.6.min.js?v=0.22.0&m=1554834449:158
unstable_runWithPriority @ react@16.8.6.min.js?v=0.22.0&m=1554834449:27
Vc @ react-dom@16.8.6.min.js?v=0.22.0&m=1554834449:158
Sc @ react-dom@16.8.6.min.js?v=0.22.0&m=1554834449:158
Z @ react-dom@16.8.6.min.js?v=0.22.0&m=1554834449:156
Kc @ react-dom@16.8.6.min.js?v=0.22.0&m=1554834449:155
ya @ react-dom@16.8.6.min.js?v=0.22.0&m=1554834449:153
enqueueSetState @ react-dom@16.8.6.min.js?v=0.22.0&m=1554834449:202
t.setState @ react@16.8.6.min.js?v=0.22.0&m=1554834449:20
i.handleChange @ connect.js:302
p @ createStore.js:172
(anonymous) @ index.js:11
dispatch @ applyMiddleware.js:35
(anonymous) @ api.js:52
Promise.then (async)
(anonymous) @ api.js:51
Promise.then (async)
(anonymous) @ api.js:45
(anonymous) @ index.js:8
value @ APIController.react.js:57
value @ APIController.react.js:28
qi @ react-dom@16.8.6.min.js?v=0.22.0&m=1554834449:130
ui @ react-dom@16.8.6.min.js?v=0.22.0&m=1554834449:133
(anonymous) @ react-dom@16.8.6.min.js?v=0.22.0&m=1554834449:158
unstable_runWithPriority @ react@16.8.6.min.js?v=0.22.0&m=1554834449:27
Vc @ react-dom@16.8.6.min.js?v=0.22.0&m=1554834449:158
Sc @ react-dom@16.8.6.min.js?v=0.22.0&m=1554834449:158
Z @ react-dom@16.8.6.min.js?v=0.22.0&m=1554834449:156
Kc @ react-dom@16.8.6.min.js?v=0.22.0&m=1554834449:155
ya @ react-dom@16.8.6.min.js?v=0.22.0&m=1554834449:153
bh @ react-dom@16.8.6.min.js?v=0.22.0&m=1554834449:160
xe @ react-dom@16.8.6.min.js?v=0.22.0&m=1554834449:160
nb.render @ react-dom@16.8.6.min.js?v=0.22.0&m=1554834449:215
(anonymous) @ react-dom@16.8.6.min.js?v=0.22.0&m=1554834449:164
$g @ react-dom@16.8.6.min.js?v=0.22.0&m=1554834449:159
Wc @ react-dom@16.8.6.min.js?v=0.22.0&m=1554834449:164
render @ react-dom@16.8.6.min.js?v=0.22.0&m=1554834449:217
t @ DashRenderer.js:12
(anonymous) @ planning:31
registry.js:16 Uncaught (in promise) Error: undefined was not found.
    at Object.resolve (registry.js:16)
    at g (TreeContainer.js:237)
    at TreeContainer.js:225
    at t.exports (_filter.js:7)
    at filter.js:46
    at _dispatchable.js:39
    at e (_curry2.js:25)
    at TreeContainer.js:224
    at TreeContainer.js:176
    at TreeContainer.js:168
resolve @ registry.js:16
g @ TreeContainer.js:237
(anonymous) @ TreeContainer.js:225
t.exports @ _filter.js:7
(anonymous) @ filter.js:46
(anonymous) @ _dispatchable.js:39
e @ _curry2.js:25
(anonymous) @ TreeContainer.js:224
(anonymous) @ TreeContainer.js:176
(anonymous) @ TreeContainer.js:168
(anonymous) @ connect.js:110
i.updateMergedPropsIfNeeded @ connect.js:224
i.render @ connect.js:348
ce @ react-dom@16.8.6.min.js?v=0.22.0&m=1554834449:98
qg @ react-dom@16.8.6.min.js?v=0.22.0&m=1554834449:97
hi @ react-dom@16.8.6.min.js?v=0.22.0&m=1554834449:104
Qg @ react-dom@16.8.6.min.js?v=0.22.0&m=1554834449:144
Rg @ react-dom@16.8.6.min.js?v=0.22.0&m=1554834449:145
Sc @ react-dom@16.8.6.min.js?v=0.22.0&m=1554834449:158
Z @ react-dom@16.8.6.min.js?v=0.22.0&m=1554834449:156
Kc @ react-dom@16.8.6.min.js?v=0.22.0&m=1554834449:155
ya @ react-dom@16.8.6.min.js?v=0.22.0&m=1554834449:153
enqueueSetState @ react-dom@16.8.6.min.js?v=0.22.0&m=1554834449:202
t.setState @ react@16.8.6.min.js?v=0.22.0&m=1554834449:20
i.handleChange @ connect.js:302
p @ createStore.js:172
(anonymous) @ index.js:11
dispatch @ applyMiddleware.js:35
p @ index.js:689
(anonymous) @ index.js:858
Promise.then (async)
(anonymous) @ index.js:648
Promise.then (async)
x @ index.js:616
(anonymous) @ index.js:347
(anonymous) @ index.js:8
(anonymous) @ TreeContainer.js:106
value @ Location.react.js:69
value @ Location.react.js:106
qi @ react-dom@16.8.6.min.js?v=0.22.0&m=1554834449:130
ui @ react-dom@16.8.6.min.js?v=0.22.0&m=1554834449:133
(anonymous) @ react-dom@16.8.6.min.js?v=0.22.0&m=1554834449:158
unstable_runWithPriority @ react@16.8.6.min.js?v=0.22.0&m=1554834449:27
Vc @ react-dom@16.8.6.min.js?v=0.22.0&m=1554834449:158
Sc @ react-dom@16.8.6.min.js?v=0.22.0&m=1554834449:158
Z @ react-dom@16.8.6.min.js?v=0.22.0&m=1554834449:156
Kc @ react-dom@16.8.6.min.js?v=0.22.0&m=1554834449:155
ya @ react-dom@16.8.6.min.js?v=0.22.0&m=1554834449:153
enqueueSetState @ react-dom@16.8.6.min.js?v=0.22.0&m=1554834449:202
t.setState @ react@16.8.6.min.js?v=0.22.0&m=1554834449:20
i.handleChange @ connect.js:302
p @ createStore.js:172
(anonymous) @ index.js:11
dispatch @ applyMiddleware.js:35
(anonymous) @ api.js:52
Promise.then (async)
(anonymous) @ api.js:51
Promise.then (async)
(anonymous) @ api.js:45
(anonymous) @ index.js:8
value @ APIController.react.js:57
value @ APIController.react.js:28
qi @ react-dom@16.8.6.min.js?v=0.22.0&m=1554834449:130
ui @ react-dom@16.8.6.min.js?v=0.22.0&m=1554834449:133
(anonymous) @ react-dom@16.8.6.min.js?v=0.22.0&m=1554834449:158
unstable_runWithPriority @ react@16.8.6.min.js?v=0.22.0&m=1554834449:27
Vc @ react-dom@16.8.6.min.js?v=0.22.0&m=1554834449:158
Sc @ react-dom@16.8.6.min.js?v=0.22.0&m=1554834449:158
Z @ react-dom@16.8.6.min.js?v=0.22.0&m=1554834449:156
Kc @ react-dom@16.8.6.min.js?v=0.22.0&m=1554834449:155
ya @ react-dom@16.8.6.min.js?v=0.22.0&m=1554834449:153
bh @ react-dom@16.8.6.min.js?v=0.22.0&m=1554834449:160
xe @ react-dom@16.8.6.min.js?v=0.22.0&m=1554834449:160
nb.render @ react-dom@16.8.6.min.js?v=0.22.0&m=1554834449:215
(anonymous) @ react-dom@16.8.6.min.js?v=0.22.0&m=1554834449:164
$g @ react-dom@16.8.6.min.js?v=0.22.0&m=1554834449:159
Wc @ react-dom@16.8.6.min.js?v=0.22.0&m=1554834449:164
render @ react-dom@16.8.6.min.js?v=0.22.0&m=1554834449:217
t @ DashRenderer.js:12
(anonymous) @ planning:31

It seems my code is not even in this error message, so I do not know how to tackle the problem. What would be a good starting point to get rid of this problem?

Many thanks!

aandres · January 23, 2020, 6:22pm

This usually means that your layout isn’t valid.

I had a similar problem because I was returning Div(id='my-id'), instead of Div(id='my-id') (notice the extra , which turn my Div into a tuple).

Topic		Replies	Views
Not loading anything while using my custom component. Console error: "Uncaught SyntaxError: Unexpected token ':' " Dash Python	1	2135	January 14, 2020
Custom components boilerplate Dash Python	3	989	July 3, 2017
Custom react component doesn't work after exporting Dash Python	0	1290	March 2, 2021
Dash Component from dash_component_boilerplate Dash Python	0	663	March 8, 2020
Troubleshooting custom component builds Dash Python	6	2349	August 22, 2018

Problem integrating a custom component

Related topics