Navigation bar is not loaded

[bhstraume]

Checklist

• I have searched the existing issues for similar issues.
• I added a very descriptive title to this issue.
• I have provided sufficient information below to help reproduce this issue.

Summary

After cloning the repo, creating a venv and installing the requirements, none of the examples run.
The navigation bar is not able to be rendered.

Reproducible code example

No response

Steps to reproduce

1. Open Bash, and run
   git clone https://github.com/gabrieltempass/streamlit-navigation-bar.git

2. In Visual Code, open the streamlit-navigation-bar folder

3. Start a Terminal session and run the following commands

python -m venv venv
. .\venv\Scripts\activate
pip install -r requirements.txt
streamlit run .\examples\st_navbar_1\streamlit_app.py

Expected behavior

Be able to test the different examples.

Current behavior

Not able to run the navigation bar at all.

Is this a regression?

• Yes, this used to work in a previous version.

Debug info

• Streamlit version: 1.33.0
• Streamlit Navigation Bar version: 3.1.2
• Python version: 3.11.0 64-bit
• Operating System: Windows 11
• Browser: Chrome

libraries.txt

Additional information

Instead of cloning the repo, I have tried to create a new venv, installing the requirements streamlit-navigation-bar and streamlit, and then run the basic example as explained here: https://github.com/gabrieltempass/streamlit-navigation-bar

Same error occur.

But I have been able to run the navigation bar after running the frontend component:

cd streamlit_navigation_bar/frontend
npm install
npm run dev

[gabrieltempass]

Hi @bhstraume, thanks for opening the bug report! I'll take a look at this as soon as possible.

[gabrieltempass]

@bhstraume I followed your steps to reproduce the problem:

1. Open Bash, and run
   git clone https://github.com/gabrieltempass/streamlit-navigation-bar.git

2. In Visual Code, open the streamlit-navigation-bar folder

3. Start a Terminal session and run the following commands

python -m venv venv
. .\venv\Scripts\activate
pip install -r requirements.txt
streamlit run .\examples\st_navbar_1\streamlit_app.py

Using the same system versions:

Streamlit version: 1.33.0
Streamlit Navigation Bar version: 3.1.2
Python version: 3.11.0 64-bit
Operating System: Windows 11
Browser: Chrome

But the navbar worked fine for me. We will have to try different approaches and gather more info, if you don't mind. In a new and empty directory, without cloning the repo, try to create a new environment again, activate it and install just the navbar (Streamlit will be installed automatically):

python -m venv venv
. .\venv\Scripts\activate
pip install streamlit-navigation-bar

Next, run this command in the same terminal:

streamlit-navigation-bar

If the package is properly installed, it should output this message:

Streamlit Navigation Bar, version 3.1.2

If this worked so far, create a streamlit_app.py file with the code from the basic example:

import streamlit as st
from streamlit_navigation_bar import st_navbar

page = st_navbar(["Home", "Documentation", "Examples", "Community", "About"])
st.write(page)

And run it:

streamlit run streamlit_app.py

Then, let me know if the problem persists or not. Besides that, what version of Chrome are you using? You can find it by following this guide.

[bhstraume]

@gabrieltempass Thanks for looking into this.

I've followed your new approach precisely.
I opened an empty folder in Visual Code, created the venv and activated it, and installed the streamlit-navigation-bar via pip.

When running this in the same terminal in Visual Code:
streamlit-navigation-bar
this message is output:
Streamlit Navigation Bar, version 3.1.2

But unfortunately the issue persists after creating the new py file with the basic example and running it.

I've tried these browsers, with the same behavior in all of them:
Chrome: 124.0.6367.92
Firefox: 125.0.2 (64-bit)
Edge: 124.0.2478.67 (Official build) (64-bit)

[bhstraume]

Did another try now where I uninstalled everything Python related completely, and then downloaded and installed the latest version 3.12.3.

But still no success. The same yellow warnings about the troubles loading the components appear.

[gabrieltempass]

From what you described, one of the reasons that could be causing the component to not load is because the app is somehow not importing the files from the navbar installation. When you clone the repo, and run the example app, the statement:

from streamlit_navigation_bar import st_navbar

could be trying to import the function from the __init__.py file inside the streamlit_navigation_bar directory, from the cloned repo. Instead of the actual distribution files from the pip install. Which would display this error message. This should not happen. I tested this scenario and the navbar worked properly. However, I think depending on your file structure it could cause the conflict.

But you mentioned that after running my suggested approach you still face the same issue, so maybe that's not what's going on. You also said that when you clone the repo and run:

cd streamlit_navigation_bar/frontend
npm install
npm run dev

you are able to visualize the navbar. Thus, as a workaround, I would suggest to keep doing this. Although I would replace the dev command, which you need to run every time you want to run your web app, to build:

cd streamlit_navigation_bar/frontend
npm install
npm run build

And change the _RELEASE variable from False to True inside the __init__.py (here). Then, you will only need to run it once. This is better explained in this part of Streamlit's tutorial, in case you are interested.

I'm sorry this is the best answer I can give you right now. Since I can't reproduce the error, it's hard to find out what's causing it. But I will leave the issue open and keep trying to debug it.

[annaysu]

I am having similar issue as well where I keep getting

ModuleNotFoundError: No module named 'streamlit_navigation_bar'

Eventhough it's installed