Not loading anything while using my custom component. Console error: "Uncaught SyntaxError: Unexpected token ':' "

Dash Python
1

I followed the step-by-step tutorial on creating a custom dash component. I tested the demo app which worked correctly. Then I replaced my React code with the demo one and built the project successfully.
When I replaced the “usage.py” code with my created component, I got a completely blank white page:

Screenshot%20from%202019-11-03%2013-31-31
Screenshot from 2019-11-03 13-31-31.png991×894 104 KB

I have these errors in my browser’s console:


jalalidatepickersingle.v0_0_1m1572769872.min.js.map:2 Uncaught SyntaxError: Unexpected token ':'

dash_renderer.v1_2_0m1572367186.dev.js:41643 Uncaught Error: Component DatePicker not found in jalalidatepickersingle
    at Object.resolve (dash_renderer.v1_2_0m1572367186.dev.js:41643)
    at getProps (dash_renderer.v1_2_0m1572367186.dev.js:40488)
    at persistenceMods (dash_renderer.v1_2_0m1572367186.dev.js:40593)
    at dash_renderer.v1_2_0m1572367186.dev.js:40622
    at Array.forEach (<anonymous>)
    at persistenceMods (dash_renderer.v1_2_0m1572367186.dev.js:40620)
    at applyPersistence (dash_renderer.v1_2_0m1572367186.dev.js:40561)
    at UnconnectedContainer.initialization (dash_renderer.v1_2_0m1572367186.dev.js:35418)
    at UnconnectedContainer.componentWillReceiveProps (dash_renderer.v1_2_0m1572367186.dev.js:35401)
    at callComponentWillReceiveProps (react-dom@16.v1_2_0m1572367177.8.6.js:11576)
react-dom@16.v1_2_0m1572367177.8.6.js:17252 The above error occurred in the <UnconnectedContainer> component:
    in UnconnectedContainer (created by Connect(UnconnectedContainer))
    in Connect(UnconnectedContainer) (created by UnconnectedAppContainer)
    in UnconnectedAppContainer (created by Connect(UnconnectedAppContainer))
    in Connect(UnconnectedAppContainer) (created by AppProvider)
    in Provider (created by AppProvider)
    in AppProvider

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom@16.v1_2_0m1572367177.8.6.js:17252

jalalidatepickersingle is my project’s name.
the jalalidatepickersingle.v0_0_1m1572769872.min.js.map file content looks like this:

{
  "version": 3,
  "sources": [
    "webpack://jalalidatepickersingle/webpack/bootstrap",
    "webpack://jalalidatepickersingle/./node_modules/moment/moment.js",
    ...
   ],
  "names": [
    "installedModules",
     ...
   ],
...
}

Platforn info:
CentOS==8
Python==3.6.8
Dash==1.5.1

my src folder and the autogenerated jalalidatepickersingle module are available here.

Btw, if I comment out my custom component from the layout, everything works fine.
Thanks in advance.

2

@ishto did you end up finding out what was happening here? I’m coming across the same problem with a new custom component I’m trying to build. I’ve used earlier versions of the template to create components successfully, but this is the first one I’ve tried with the latest version (which generates R bindings as well).