Error: You need to enable JavaScript to run this app

Custom Components
1

Hi all.

Create custom component from code

    components.html(f"""
    <html>
        <head>
            <script src="/static/mermaid.esm.min.mjs"></script>
            <script>
                mermaid.initialize({{startOnLoad: true}});
            </script>
        </head>
        <body>

            <div class="mermaid">
                {mermaid_code}
            </div>
        </body>
    </html>
    """, height=500)

But after page load, i get this error:
You need to enable JavaScript to run this app. When i do this without streamlit it`s working.

Please help!!!

2

Hey @usasacm, could it be an issue with the URL in <script src="/static/mermaid.esm.min.mjs"></script>? I believe in order to for this to work when hosted via Streamlit, you would need to place that file in Streamlit’s static folder wherever Streamlit is installed. This command should provide the path where you have to copy the file: python -c "import streamlit as st; print(f'{st.__path__[0]}/static/static/')"
If mermaid loads more assets, they have to be placed accordingly.
Note that when you install a new version of Streamlit or do changes to your Python environment, you would need to place the assets again accordingly.

3

Hey @raethlein, I change to this

def mermaid_component(mermaid_code):
    components.html(f"""
    <html>
        <head>
           <script type='text/javascript' src='app/static/mermaid.js'></script>
            </script>
        </head>
        <body>
            <div class="mermaid">
                {mermaid_code}
            </div>
        </body>
    </html>
    """, height=300)

Now file load, but Content-Type = text/plain, not is application/javascript

4

@usasacm for me it works with a test file! A wrong content type hints towards the fact that the file is not found correctly. For the src path you have provided, the file has to be stored under <streamlit_package_path>/static/app/static/mermaid.js

5

You meen
image on this path not work
return this
image

but if I change to <streamlir_path>/app/static
file return, but content-type is wrong
image

and if scr = https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.js All work

6

@usasacm Yeah I think that’s the wrong path. You have put it in the folder where your app script is stored, but you have to put it into the folder where the Streamlit library is stored. This is what I meant with

This command should provide the path where you have to copy the file: python -c "import streamlit as st; print(f'{st.__path__[0]}/static/static/')"

7

@raethlein I understand correctly that this command get the link to .static folder into project

8

@usasacm what’s the output of the command for you? If it points you to the .static folder then you might need to put it there.
For me, the output is for example ~/debug/venv/lib/python3.12/site-packages/streamlit/static/static/ which is where Python packages are installed for me.

9

@raethlein , Good day/
This manual says that only pictures can be stored in the ./static/ folder, other extensions receive content-type = plain text. And other types of files must be hosted outside the application.
So my question is where should third party javascript libraries like jquery etc be stored.
I apologize for my stupidity

10

Mermaid is already out there, you don’t need to host it.

11

I try this and it is work fine, but due to information security policy, I cannot use links to external resources

12

Then you need to serve it from a web server in your organization.

13

@raethlein , @Goyo Thank you guys

14

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.