Widget style broken after packaged with pyinstaller

[koei6666]

First Check

• I added a very descriptive title here.
• This is not a Q&A. I am sure something is wrong with NiceGUI or its documentation.
• I used the GitHub search to find a similar issue and came up empty.

Example Code

def open_search_popup():
    with ui.dialog().classes('w-96').props('backdrop-filter="blur(8px) brightness(40%)"') as dialog, ui.card().classes('w-96'):
        ui.label('A').classes(f'text-lg font-bold mb-2 w-full')
        
        # Mode selection - create without initial value and set it after creation
        
        mode = ui.toggle(
            options= 
            {'i' : 'B', 
             'w' : 'C', 
             't' : 'D'},
             value= 'i'
             ).classes('w-full justify-center mb-4').bind_value(search_mode).on_value_change(test_func)
                   
        textinput = ui.textarea(placeholder='検索').props('clearable').classes('w-full shadow-xl rounded-lg focus: border-4 border-indigo-200 border-b-indigo-500')
        dialog.open()

Description

After updated to NiceGui 3.0, almost all the widgets' style on page broken after packaged with pyinstaller.(When run from script the style works correctly), not only the widget I have custom CSS but also those with default style.

From packaged version:

From script(Works correctly):

NiceGUI Version

3.0.4

Python Version

Python 3.13.3

Browser

Edge

Operating System

Windows

Additional Context

No response

[evnchn]

Hello @koei6666 thanks for your report.

Unfortunately I cannot recreate on MacOS. Suspecting Windows-specific issue, but I may only test at home...

Meantime, may I have the Edge version, as well as the browser's console logs?

from nicegui import native, ui


@ui.page('/')
def main_page():
    with ui.dialog().classes('w-96').props('backdrop-filter="blur(8px) brightness(40%)"') as dialog, ui.card().classes('w-96'):
        ui.label('A').classes('text-lg font-bold mb-2 w-full')
        ui.toggle(
            options={'i': 'B',
                     'w': 'C',
                     't': 'D'},
            value='i'
        ).classes('w-full justify-center mb-4')

        ui.textarea(placeholder='search').props('clearable').classes(
            'w-full shadow-xl rounded-lg focus: border-4 border-indigo-200 border-b-indigo-500')
        dialog.open()


ui.run(reload=False, port=native.find_open_port())

rm -rf build/ dist/
nicegui-pack --onefile --name "myapp" test.py

[koei6666]

Hello, @evnchn , I'm on Edge 141.0.3537.71, and below is the console log:

TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'.
    at index.ts-4c633d70.js:1:3292

main.esm.mjs:1453  AG Grid: invalid gridOptions property 'enableSelectionWithoutKeys' did you mean any of these: onCellSelectionDeleteEnd, onCellSelectionDeleteStart, enableCellTextSelection, onCellSelectionChanged, onRangeSelectionChanged, enableCellEditingOnBackspace, enableRangeSelection, enableCellExpressions.
If you are trying to annotate gridOptions with application data, use the 'gridOptions.context' property instead.
(anonymous) @ main.esm.mjs:1453

main.esm.mjs:1453  AG Grid: invalid gridOptions property 'selectAll' did you mean any of these: cellSelection, isRowSelectable, rowSelection, enableCellTextSelection, excelStyles, onCellSelectionDeleteEnd, onCellSelectionDeleteStart, enableCellSpan.
If you are trying to annotate gridOptions with application data, use the 'gridOptions.context' property instead.
(anonymous) @ main.esm.mjs:1453

main.esm.mjs:1453  AG Grid: to see all the valid gridOptions properties please check: https://www.ag-grid.com/javascript-data-grid/grid-options/
(anonymous) @ main.esm.mjs:1453

main.esm.mjs:1453  AG Grid: As of version 32.2.1, using `rowSelection` with the values "single" or "multiple" has been deprecated. Use the object value instead.
(anonymous) @ main.esm.mjs:1453

main.esm.mjs:1453  AG Grid: warning #101 Could not find 'CheckboxHeader' component. It was configured as "headerComponent: 'CheckboxHeader'" but it wasn't found in the list of registered components.
          Did you mean: [checkboxRenderer,agCheckboxCellRenderer,agCheckboxCellEditor]?
 If using a custom component check it has been registered correctly. 
See https://www.ag-grid.com/javascript-data-grid/errors/101?_version_=34.2.0&propertyName=headerComponent&componentName=CheckboxHeader&agGridDefaults=%7B%7D&jsComps=%7B%7D

(anonymous) @ main.esm.mjs:1453
nicegui.js:431  TypeError: Cannot read properties of undefined (reading 'update_grid')
    at update (nicegui.js:400:29)
    at async a.<anonymous> (nicegui.js:429:17)
(anonymous) @ nicegui.js:431

[falkoschindler]

@koei6666 The log output indicates some AG Grid usage, but your code doesn't contain any ui.aggrid. Please make sure to provide a minimal and reproducible code example. Thanks!

[koei6666]

The console log output some error in AgGrid but it's not the issue here, in fact AgGrid is the only widget which works normally in this issue. the problematic widget didnt output any error message in browser console.

[koei6666]

This issue no longer exists after I switch to native mode. so its maybe something wrong with my browser but when run from script its perfectly fine.