[Solved] Import error when trying to test my component in usage.py

Dash Python
1

I’m getting this error at the very first line of my usage.py script:

Traceback (most recent call last):
  File "usage.py", line 1, in <module>
    import grasia_dash_components
  File "/home/akronix/workspace/grasia-dash-components/grasia_dash_components/__init__.py", line 10, in <module>
    'grasia_dash_components'
  File "/usr/local/lib/python3.5/dist-packages/dash-0.19.0-py3.5.egg/dash/development/component_loader.py", line 42, in load_components
KeyError: 'props'

All the source code is here: GitHub - Grasia/grasia-dash-components at usage-accordion
Nota that demo does work correctly and usage.py used to work before I added the Accordion component.

2

OK, I found what the problem was:
I was using a prop in my react component that wasn’t defined in PropTypes. Adding it fixed it.

3

The error showed up again :frowning: I’m not even sure if I fixed with that last time.

4

Some background - Dash creates components dynamically through a metadata.json file (e.g. https://github.com/plotly/dash-core-components/blob/master/dash_core_components/metadata.json). This metadata.json file is generated from react-docgen from each component’s propTypes.

For example, take a look at the Checklist.react.js component:

This KeyError: 'props' usually means that the metadata.json file isn’t what dash expects it to be (dash could certainly fail more gracefully here!). This can happen because:

  • propTypes is missing
  • Perhaps there is a prop in defaultProps that isn’t included in propTypes
  • npm run prepublish wasn’t run so metadata.json wasn’t generated.

I’d start debugging by inspecting the metadata.json file, comparing it against your code, and looking for any irregularities.

I hope that’s helpful!

1 Like
5

Wow, that was very helpful!
The problem was as stupid as I wrote Accordion.PropTypes instead of Accordion.propTypes. Curiously, react didn’t throw any warnings about this…Now it’s fixed on my repo: https://github.com/Grasia/grasia-dash-components/commit/cc56355f77140a4039826d4ffe3a04f634977606

Definitely, a more explanatory error would be much better.

1 Like
6

This advice was very helpful! Thank you.

(I ran into the same issue, had made a mistake in my React component, but no errors were thrown when building, and just had the Python KeyError: 'props' when trying to use it.)

2 Likes