Black Lives Matter. Please consider donating to Black Girls Code today.

Problem integrating a custom component

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!

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).