Flet Web Bug In Latest Version

[Muddassir-Farooq-official]

Duplicate Check

• I have searched the opened issues and there are no duplicates

Describe the bug

When we build flet web using flet build web it's generate web application but when run it in browser it print in console no module flet found even in requirements.txt and pyprojrct.toml it clearly mentioned flet dependency

Code sample

Code

[Paste your code here]

To reproduce

Want to run flet and httpx in pyodide

Expected behavior

No response

Screenshots / Videos

Captures

[Upload media here]

Operating System

Windows

Operating system details

Windows

Flet version

0.27.1

Regression

Yes, it used to work in a previous Flet version (please specify the version in additional details)

Suggestions

No response

Logs

Additional details

No response

[FeodorFitsner]

Please give more details: what's in pyproject.toml, what command used to build?

[Muddassir-Farooq-official]

Please give more details: what's in pyproject.toml, what command used to build?

Command is flet build web

With requirements.txt
flet==0.27.1

With Pyproject.toml
[project]
name = "my_flet_app"
version = "1.0.0"
description = "Flet app with required dependencies"
authors = [{name = "Muddassir Farooq", email = "muddassir@example.com"}]
dependencies = [
"flet==0.27.1",
]

[tool.flet]
permissions = ["internet", "camera", "microphone"]

[tool.flet.android.permission]
"android.permission.INTERNET" = true
"android.permission.CAMERA" = true
"android.permission.RECORD_AUDIO" = true

[tool.flet.ios.info]
NSCameraUsageDescription = "This app requires camera access."
NSMicrophoneUsageDescription = "This app requires microphone access."
NSUserTrackingUsageDescription = "This app requires tracking permission."

[tool.flet.web]
base_url = "/"
use_color_emoji = false

[Muddassir-Farooq-official]

Please give more details: what's in pyproject.toml, what command used to build?

Same error both in flet build web and flet publish

[Muddassir-Farooq-official]

flutter_bootstrap.js:3 Exception while loading service worker: Error: prepareServiceWorker took more than 4000ms to resolve. Moving on.
at flutter_bootstrap.js:1:2980

pyodide.asm.js:10 Loading micropip, packaging
pyodide.asm.js:10 Loaded micropip, packaging
pyodide.asm.js:10 Loading requirements.txt: ['flet==0.27.1']
pyodide.asm.js:10 Loading httpx, six
pyodide.asm.js:10 Loaded httpx, six
python.js:23 Python engine initialized!
2
pyodide.asm.js:10 Route change: /
pyodide.asm.js:10 Unhandled error processing page session : Traceback (most recent call last):
pyodide.asm.js:10 File "/lib/python3.12/site-packages/flet/app.py", line 338, in on_session_created
pyodide.asm.js:10 target(page)
pyodide.asm.js:10 File "/home/pyodide/main.py", line 165, in main
pyodide.asm.js:10 route_change(ft.RouteChangeEvent(page.route), page) # Initial route handling
pyodide.asm.js:10 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
pyodide.asm.js:10 File "/home/pyodide/main.py", line 13, in route_change
pyodide.asm.js:10 user_id = check_client_storage(page) # Retrieve user_id here
pyodide.asm.js:10 ^^^^^^^^^^^^^^^^^^^^^^^^^^
pyodide.asm.js:10 File "/home/pyodide/client_storage.py", line 4, in check_client_storage
pyodide.asm.js:10 user_id = page.client_storage.get("userid")
pyodide.asm.js:10 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
pyodide.asm.js:10 File "/lib/python3.12/site-packages/flet/core/client_storage.py", line 29, in get
pyodide.asm.js:10 jv = self.__page._invoke_method(
pyodide.asm.js:10 ^^^^^^^^^^^^^^^^^^^^^^^^^^^
pyodide.asm.js:10 File "/lib/python3.12/site-packages/flet/core/page.py", line 1214, in _invoke_method
pyodide.asm.js:10 raise TimeoutError(
pyodide.asm.js:10 TimeoutError: Timeout waiting for invokeMethod clientStorage:get({'key': 'userid'}) call

[Muddassir-Farooq-official]

#main.py

import flet as ft
from client_storage import *

def route_change(route_event, page):
"""Handle route changes asynchronously."""
route = route_event.route
print("Route change:", route)
route = route_event.route
print("Route change:", route)

page.views.clear()  # Clear previous views to avoid memory leaks

user_id = check_client_storage(page)  # Retrieve user_id here
role = check_client_storage_role(page)
print(f"Hello User: {user_id}, Role: {role}")  # Debugging logs

global current_role
# current_role = role  # Assign to global

page.views.clear()  # Clear previous views to avoid memory leaks

if route == "/":
    from login import Login_View
    page.views.append(Login_View(page))

elif route == "/dashboard":
    from Dashboard import Dashboard_View
    page.views.append(Dashboard_View(page, role))

elif route == "/store":
    from Store import Store_View
    page.views.append(Store_View(page, role))

elif route == "/account":
    from Account import Account_View
    page.views.append(Account_View(page, role))

elif route == "/kitchen":
    from Kitchen import Kitchen_View
    page.views.append(Kitchen_View(page, role))

elif route == "/menu":
    from Menu import Menu_View
    page.views.append(Menu_View(page, role))

elif route == "/Suppliers_New":
    from New_Supplier import Supplier_View
    page.views.append(Supplier_View(page, role))

elif route == "/Supplier_lists":
    from New_Supplier import Supplier_List_View
    page.views.append(Supplier_List_View(page, role))

elif route == "/Add_New_Item":
    from New_Item import New_Item_View
    page.views.append(New_Item_View(page, role))

elif route == "/List_Items_View":
    from New_Item import New_Item_List_View
    page.views.append(New_Item_List_View(page, role))

elif route == "/Add_New_Item_Category":
    from New_Item import New_Item_Category_View
    page.views.append(New_Item_Category_View(page, role))

elif route == "/Add_New_Table":
    from New_Table import New_Table_View
    page.views.append(New_Table_View(page, role))

elif route == "/Table_lists":
    from New_Table import Table_List_View
    page.views.append(Table_List_View(page, role))

elif route == "/Add_New_User":
    from New_User import New_User_View
    page.views.append(New_User_View(page, role))

elif route == "/User_lists":
    from New_User import User_List_View
    page.views.append(User_List_View(page, role))

elif route == "/store_inventory":
    from Store_Inventory import Store_Inventory_View
    page.views.append(Store_Inventory_View(page, role))

elif route == "/store_alerts":
    from Store_Inventory import Store_Alerts_View
    page.views.append(Store_Alerts_View(page, role))

elif route == "/Assign_Item":
    from Issue_Stock import Assign_Item_View
    page.views.append(Assign_Item_View(page, role))

elif route == "/New_Purchase":
    from New_Purchase import New_Purchase_View
    page.views.append(New_Purchase_View(page, role))

elif route == "/Purchase_List":
    from New_Purchase import Purchase_History_View
    page.views.append(Purchase_History_View(page, role))

elif route == "/fastfood_inventory":
    from Kitchen_Inventory import Fast_Kitchen_Inventory_View
    page.views.append(Fast_Kitchen_Inventory_View(page, role))

elif route == "/desifood_inventory":
    from Kitchen_Inventory import Desi_Kitchen_Inventory_View
    page.views.append(Desi_Kitchen_Inventory_View(page, role))

elif route == "/bistro_inventory":
    from Kitchen_Inventory import Bistro_Kitchen_Inventory_View
    page.views.append(Bistro_Kitchen_Inventory_View(page, role))

elif route == "/kitchen_alerts":
    from Kitchen_Inventory import Kitchen_Alerts_View
    page.views.append(Kitchen_Alerts_View(page, role))

elif route == "/New_Menu_Item_FF":
    from New_Dish import New_Menu_Item_FF_View
    page.views.append(New_Menu_Item_FF_View(page, role))

else:
    # 404 Page
    page.views.append(
        ft.View(
            route="/404",
            controls=[
                ft.Text("404", size=80, weight="bold", text_align="center"),
                ft.Text("Page Not Found", size=26, text_align="center"),
                ft.FilledButton(
                    "Return Home",
                    style=ft.ButtonStyle(
                        bgcolor='black', color='white',
                        shape=ft.RoundedRectangleBorder(radius=10),
                    ),
                    on_click=lambda _: page.go("/")
                )
            ],
            horizontal_alignment="center",
            vertical_alignment="center",
        )
    )

page.update()  # Update the page to reflect changes

def view_pop(view, page):
"""Handle back navigation asynchronously."""
page.views.pop()
top_view = page.views[-1]
page.go(top_view.route)

def main(page: ft.Page):
"""Initialize the Flet app asynchronously."""
page.title = "360 Bistro"

def on_route_change(route_event):
    route_change(route_event, page)

page.on_route_change = on_route_change  # Properly assign the async function

page.theme_mode = 'light'
page.window.width = 370
page.window.always_on_top = True

route_change(ft.RouteChangeEvent(page.route), page)  # Initial route handling
page.update()

ft.app(target=main)

#client_storage.py

import flet as ft

def check_client_storage(page):
user_id = page.client_storage.get("userid")
return user_id

def check_client_storage_password(page):
user_id = page.client_storage.get("password")
return user_id

def check_client_storage_role(page):
user_id = page.client_storage.get("role")
return user_id

def check_client_storage_name(page):
user_name = page.client_storage.get("username")
return user_name

[jpchauvel]

I have the same issue.

[jpchauvel]

I'm using flet 0.27.4 and flutter 3.27.4.

[shiena]

import flet from anything other than main.py does not seem to find the flet module.
For example, the following simple script reproduces the error.

# main.py
import flet as ft
import func


ft.app(func.main)

# func.py
import flet as ft

def main(page: ft.Page):
    counter = ft.Text("0", size=50, data=0)

    def increment_click(e):
        counter.data += 1
        counter.value = str(counter.data)
        counter.update()

    page.floating_action_button = ft.FloatingActionButton(
        icon=ft.Icons.ADD, on_click=increment_click
    )
    page.add(
        ft.SafeArea(
            ft.Container(
                counter,
                alignment=ft.alignment.center,
            ),
            expand=True,
        )
    )

[shiena]

In flet v0.26.0, if you flet build web, you will find the dependent libraries in build/web/assets/app/app.zip. However, in flet v0.27.0 and later, there are no dependent libraries in app.zip.

[shiena]

Probably due to these commits.
When building on windows, the site-packages are copied outside the app folder, so the web build does not include the dependent packages in app.zip.

flet-dev/serious-python@0d79600
flet-dev/serious-python@6404a0d

[shiena]

The web build worked when site-packages were added to app.zip as follows.

$ flet build web
$ cd build
$ cp -a site-packages __pypackages__
$ zip -r web/assets/app/app.zip __pypackages__
$ rm -rf _pypackages__
$ python -m http.server --directory web

[Muddassir-Farooq-official]

@FeodorFitsner @ndonkoHenri @InesaFitsner kindly resolve this bug