Different import name and package name breaks a new app

Reproduce the generated app using the CLI inputs and commands in the report, then inspect the generated pyproject.toml and the custom_components/frontend/ build output. Check how the differing package_name and import_name are represented in the component declaration; done means the example.py app runs without the asset_dir StreamlitAPIException.

Hello everyone, hope you're doing fine!

I'm trying to generate a new streamlit app with this template, to include my own custom components, and I've found that when the package_name is different than the import_name on the CLI, when running the app it shows the error:

streamlit.errors.StreamlitAPIException: Component 'streamlit-template.custom_components' must be declared in pyproject.toml with asset_dir to use file-backed js.

Here are the steps I've executed on the CLI:
[1/8] author_name (John Smith):
[2/8] author_email (john@example.com):
[3/8] project_name (Streamlit Component X): my streamlit app
[4/8] package_name (my-streamlit-app):
[5/8] import_name (my_streamlit_app): custom_components
[6/8] description (Streamlit component that allows you to do X):
[7/8] Select open_source_license
1 - MIT
2 - BSD-3-Clause
3 - ISC
4 - Apache-2.0
5 - GPL-3.0-or-later
6 - LicenseRef-Proprietary
Choose from [1/2/3/4/5/6] (1):
[8/8] Select framework
1 - React + Typescript
2 - Pure Typescript
Choose from [1/2] (1):

And after having the folders ready I did:

cd my-streamlit-app
uv venv
source .venv/bin/activate
cd ./custom_components/frontend/ && npm i && npm run build
cd ../..
uv pip install -e .
python3 -m streamlit run ./example.py

And faced the error.

I think this has to do with some missing configuration on the template.
Any help to fix the error will be appretiated!