Every component return "Component Error"

[cryoff]

python: python 3.10 OS: Win10 Related pip packages:

streamlit-elements    0.1.0
streamlit             1.9.0

[okld]

Hello @cryoff, could you share a sample code to reproduce the error?

[cryoff]

Sure:

from streamlit_elements import elements, mui

with elements("new_element"):
    mui.Typography("Hello world")

I tried to reproduce it in a minimal environment that comes with pip install streamlit-elements==0.1.* Maybe the reason is Python 3.10.4 or Windows10. I will try with my linux (ubuntu) machine as well.

pip list:

Package               Version
--------------------- -----------
altair                4.2.0
argon2-cffi           21.3.0
argon2-cffi-bindings  21.2.0
asttokens             2.0.5
attrs                 21.4.0
backcall              0.2.0
beautifulsoup4        4.11.1
bleach                5.0.0
blinker               1.4
cachetools            5.1.0
certifi               2022.5.18.1
cffi                  1.15.0
charset-normalizer    2.0.12
click                 8.0.4
colorama              0.4.4
debugpy               1.6.0
decorator             5.1.1
defusedxml            0.7.1
entrypoints           0.4
executing             0.8.3
fastjsonschema        2.15.3
gitdb                 4.0.9
GitPython             3.1.27
idna                  3.3
importlib-metadata    4.11.4
ipykernel             6.13.0
ipython               8.3.0
ipython-genutils      0.2.0
ipywidgets            7.7.0
jedi                  0.18.1
Jinja2                3.1.2
jsonschema            4.5.1
jupyter-client        7.3.1
jupyter-core          4.10.0
jupyterlab-pygments   0.2.2
jupyterlab-widgets    1.1.0
MarkupSafe            2.1.1
matplotlib-inline     0.1.3
mistune               0.8.4
nbclient              0.6.3
nbconvert             6.5.0
nbformat              5.4.0
nest-asyncio          1.5.5
notebook              6.4.11
numpy                 1.22.4
packaging             21.3
pandas                1.4.2
pandocfilters         1.5.0
parso                 0.8.3
pickleshare           0.7.5
Pillow                9.1.1
pip                   21.3.1
prometheus-client     0.14.1
prompt-toolkit        3.0.29
protobuf              3.20.1
psutil                5.9.1
pure-eval             0.2.2
pyarrow               8.0.0
pycparser             2.21
pydeck                0.7.1
Pygments              2.12.0
Pympler               1.0.1
pyparsing             3.0.9
pyrsistent            0.18.1
python-dateutil       2.8.2
pytz                  2022.1
pytz-deprecation-shim 0.1.0.post0
pywin32               304
pywinpty              2.0.5
pyzmq                 23.0.0
requests              2.27.1
semver                2.13.0
Send2Trash            1.8.0
setuptools            60.2.0
six                   1.16.0
smmap                 5.0.0
soupsieve             2.3.2.post1
stack-data            0.2.0
streamlit             1.9.0
tzdata                2022.1
tzlocal               4.2
urllib3               1.26.9
validators            0.19.0
watchdog              2.1.8
wcwidth               0.2.5
webencodings          0.5.1
wheel                 0.37.1
widgetsnbextension    3.6.0
zipp                  3.8.0

[cryoff]

Same happens with Python 3.8.10 on windows Is there a way to look into logs?

[okld]

What browser and version are you using? And can you check if you have any javascript error in your browser's developer console? Thank you

[cryoff]

Browser: Chrome, Version 101.0.4951.67 (Official Build) (64-bit) Error from console: https://mui.com/production-error/?code=9&args[]=blue Log:

main.970d3503.chunk.js:2 Gather usage stats:  false
5.26b8f29c.chunk.js:2 Unrecognized feature: 'ambient-light-sensor'.
w @ 5.26b8f29c.chunk.js:2
5.26b8f29c.chunk.js:2 Unrecognized feature: 'battery'.
w @ 5.26b8f29c.chunk.js:2
5.26b8f29c.chunk.js:2 Unrecognized feature: 'layout-animations'.
w @ 5.26b8f29c.chunk.js:2
5.26b8f29c.chunk.js:2 Unrecognized feature: 'legacy-image-formats'.
w @ 5.26b8f29c.chunk.js:2
5.26b8f29c.chunk.js:2 Unrecognized feature: 'oversized-images'.
w @ 5.26b8f29c.chunk.js:2
5.26b8f29c.chunk.js:2 Unrecognized feature: 'vr'.
w @ 5.26b8f29c.chunk.js:2
5.26b8f29c.chunk.js:2 Unrecognized feature: 'wake-lock'.
w @ 5.26b8f29c.chunk.js:2
framework-523bc72b93065597.js:1 Error: Minified MUI error #9; visit https://mui.com/production-error/?code=9&args[]=blue for the full message.
    at i (1400-5e636e39d98b4fe8.js:46:21387)
    at f (1400-5e636e39d98b4fe8.js:46:22942)
    at k (1400-5e636e39d98b4fe8.js:46:3694)
    at C (1400-5e636e39d98b4fe8.js:46:5008)
    at x (1400-5e636e39d98b4fe8.js:46:5153)
    at j (1400-5e636e39d98b4fe8.js:46:7893)
    at 1521.5d042e15dfda625d.js:1:680
    at Ui (framework-523bc72b93065597.js:1:104671)
    at t.unstable_runWithPriority (framework-523bc72b93065597.js:1:129371)
    at Ql (framework-523bc72b93065597.js:1:44990)
cu @ framework-523bc72b93065597.js:1

Update: same issue when using Firefox 100.0.2 (64-bit)

[cryoff]

Meanwhile, everything works nice both on Chrome and Firefox, when run under Ubuntu 22.04

[okld]

Could you check if your theme config in .streamlit/config.toml uses the value "blue"? It seems that colors specified this way are not supported by Material UI. A quick fix would be to replace "blue" with "#00F", and any other color name with their hex equivalent.

[cryoff]

Awesome, thank you for the help!! Changed to "#00F" in the config.toml and it works now. Interesting, why it still works under ubuntu.

[okld]

I suppose you have a different streamlit config file under Ubuntu. I'll fix this issue in the next release.