Native mode on Windows 11 results in a blank window

[falkoschindler]

Discussed in #2737

^{Originally posted by alimate2023 March 21, 2024}
Running in native mode results in a blank window.
The console displays a warning message as follows
I don't know if elements are not displayed in the native window.

from nicegui import native, ui
from nicegui.elements import markdown

ui.icon('thumb_up')
ui.markdown('This is **Markdown**.')
ui.html('This is <strong>HTML</strong>.')
with ui.row():
    ui.label('CSS').style('color: #888; font-weight: bold')
    ui.label('Tailwind').classes('font-serif')
    ui.label('Quasar').classes('q-ml-xl')
ui.link('NiceGUI on GitHub', 'https://github.com/zauberzeug/nicegui')

# ui.run()

ui.label('Hello from PyInstaller')

# ui.run(reload=False, port=native.find_open_port())
ui.run(reload=False,native=True, window_size=(400, 300), fullscreen=False)

console error

NiceGUI ready to go on http://localhost:8000
[pywebview] MSHTML is deprecated. See https://pywebview.flowrl.com/guide/renderer.html#web-engine on details how to
use Edge Chromium

[Smug246]

hi i'm on windows 11 and i have no error running this code what so ever. here are a list of the libraries i have installed and their versions. maybe that would help to compare.
Im also using python version 3.11.6

aiofiles==23.2.1
aiohttp==3.8.5
aiosignal==1.3.1
altgraph==0.17.4
annotated-types==0.5.0
anyio==3.7.1
async-timeout==4.0.3
attrs==23.1.0
bidict==0.22.1
bottle==0.12.25
certifi==2023.7.22
cffi==1.15.1
charset-normalizer==3.2.0
click==8.1.7
clr-loader==0.2.6
colorama==0.4.6
cryptography==41.0.3
customtkinter==5.2.1
cx-Freeze==6.15.10
cx-Logging==3.1.0
darkdetect==0.8.0
decorator==5.1.1
Deprecated==1.2.14
fastapi==0.109.0
fastapi-socketio==0.0.10
frozenlist==1.4.0
h11==0.14.0
httpcore==0.17.3
httptools==0.6.0
httpx==0.24.1
idna==3.4
ifaddr==0.2.0
itsdangerous==2.1.2
Jinja2==3.1.3
keyauth==1.0.3
lief==0.13.2
markdown2==2.4.10
MarkupSafe==2.1.3
multidict==6.0.4
netifaces==0.11.0
nicegui==1.4.11
orjson==3.9.7
packaging==23.2
pdf2image==1.16.3
pefile==2023.2.7
Pillow==10.0.0
proxy-tools==0.1.0
pscript==0.7.7
psutil==5.9.6
psycopg2-binary==2.9.7
pycparser==2.21
pycryptodome==3.19.0
pycryptodomex==3.19.0
pydantic==2.3.0
pydantic_core==2.6.3
PyGithub==2.2.0
Pygments==2.16.1
pyinstaller==6.1.0
pyinstaller-hooks-contrib==2023.10
PyJWT==2.8.0
PyNaCl==1.5.0
pyperclip==1.8.2
pypiwin32==223
python-dotenv==1.0.0
python-engineio==4.8.2
python-multipart==0.0.6
python-socketio==5.11.0
pythonnet==3.0.2
pyuac==0.0.3
pywebview==4.3.3
pywin32==306
pywin32-ctypes==0.2.2
PyYAML==6.0.1
redis==5.0.0
requests==2.31.0
requests-toolbelt==1.0.0
simple-websocket==0.10.1
sniffio==1.3.0
starlette==0.35.1
tee==0.0.3
typing_extensions==4.9.0
upstash-redis==0.15.0
urllib3==2.0.4
uvicorn==0.22.0
vbuild==0.8.2
watchfiles==0.20.0
websockets==11.0.3
WMI==1.5.1
wrapt==1.16.0
wsproto==1.2.0
yarl==1.9.2

[falkoschindler]

Thanks, @Smug246!

@alimate2023 Your packages from #2737 (reply in thread) seem quite old compared to what @Smug246 posted. Maybe you can try updating them and check if the problem persists?

[alimate2023]

@Smug246
Thanks. I tring to python 3.11.6.

[Smug246]

@Smug246 Thanks. I tring to python 3.11.6.

did it work?

[alimate2023]

I tested it with the same Python, nicegui version, but the same phenomenon occurs. OTL

[amks1]

Working fine on Windows 11, Python 3.11.2

[QuantumlyCertain]

Getting similar (failed) results here on Windows 11 with both Python 3.12.3 and 3.11.9. Running native mode on Windows 11 results in a blank screen, with this error printed to the console:

[pywebview] WebView2 initialization failed with exception:
 Unable to cast to Microsoft.Web.WebView2.Core.Raw.ICoreWebView2Environment10.
This may happen if you are using an interface not supported by the version of the WebView2 Runtime you are using.
For instance, if you are using an experimental interface from an older SDK that has been modified or removed in a newer runtime.
Or, if you are using a public interface from a newer SDK that wasn't implemented in an older runtime.
For more information about WebView2 versioning please visit the following: https://learn.microsoft.com/microsoft-edge/webview2/concepts/versioning ---> System.InvalidCastException: Unable to cast COM object of type 'System.__ComObject' to interface type 'Microsoft.Web.WebView2.Core.Raw.ICoreWebView2Environment10'. This operation failed because the QueryInterface call on the COM component for the interface with IID '{EE0EB9DF-6F12-46CE-B53F-3F47B9C928E0}' failed due to the following error: No such interface supported (Exception from HRESULT: 0x80004002 (E_NOINTERFACE)).
   at Microsoft.Web.WebView2.Core.CoreWebView2Environment.get__nativeICoreWebView2Environment10()
   --- End of inner exception stack trace ---
   at Microsoft.Web.WebView2.Core.CoreWebView2Environment.get__nativeICoreWebView2Environment10()
   at Microsoft.Web.WebView2.Core.CoreWebView2Environment.CreateCoreWebView2ControllerOptions()
   at Microsoft.Web.WebView2.WinForms.CoreWebView2CreationProperties.CreateCoreWebView2ControllerOptions(CoreWebView2Environment environment)
   at Microsoft.Web.WebView2.WinForms.WebView2.<InitCoreWebView2Async>d__26.MoveNext()

This is in a fresh virtual env with only nicegui and pywebview installed, running the sample code from OP.

aiofiles==23.2.1
aiohttp==3.9.5
aiosignal==1.3.1
annotated-types==0.6.0
anyio==4.3.0
attrs==23.2.0
bidict==0.23.1
bottle==0.12.25
certifi==2024.2.2
cffi==1.16.0
click==8.1.7
clr-loader==0.2.6
colorama==0.4.6
docutils==0.19
fastapi==0.109.2
frozenlist==1.4.1
h11==0.14.0
httpcore==1.0.5
httptools==0.6.1
httpx==0.27.0
idna==3.7
ifaddr==0.2.0
itsdangerous==2.2.0
Jinja2==3.1.3
markdown2==2.4.13
MarkupSafe==2.1.5
multidict==6.0.5
nicegui==1.4.22
orjson==3.10.1
proxy_tools==0.1.0
pscript==0.7.7
pycparser==2.22
pydantic==2.7.1
pydantic_core==2.18.2
Pygments==2.17.2
python-dotenv==1.0.1
python-engineio==4.9.0
python-multipart==0.0.9
python-socketio==5.11.2
pythonnet==3.0.3
pywebview==5.1
PyYAML==6.0.1
simple-websocket==1.0.0
sniffio==1.3.1
starlette==0.36.3
typing_extensions==4.11.0
uvicorn==0.29.0
vbuild==0.8.2
watchfiles==0.21.0
websockets==12.0
wsproto==1.2.0
yarl==1.9.4

UPDATE: Turns out my particular issue was WebView2 runtime not being installed. Windows wouldn't let me install it, stating that it was already installed, but apparently it was lying to me.

[atticus-lv]

Same problem. I think this may due to some windows settings. I pack my app with pyinstaller and use it on more than 10 pc. some of them have this problem and others not

[gsal]

For me is not working.

Rocky 9.3
Python 3.11.9
Nicegui 1.4.25
pywebview 5.1

BUT, I cannot install what I need into the system, so, I am working out of a fresh conda environment that I put together in the last 48 hours.

I get the blank window and the only messages I get at the prompt are the following:

NiceGUI ready to go on http://localhost:8000
js: Uncaught SyntaxError: Unexpected token '='
js: Uncaught ReferenceError: createApp is not defined

[python-and-fiction]

@falkoschindler It is a compatibility problem of MSHTML or InternetExplorer.
I try to use chromium based browser which supports IE mode, and visitlocalhost:8080, it is blank.
I open devtool, and I get the error of js syntax.
So, we should not use MSHTML or IE mode to visit nicegui app/site.

from nicegui import ui,app

#app.native.start_args['gui'] = 'mshtml'

ui.button('yes',on_click=lambda e:ui.notify(e.sender.text))

ui.run()

[falkoschindler]

So, we should not use MSHTML or IE mode to visit nicegui app/site.

Do you suggest setting app.native.start_args['gui'] to solve this issue? Or is it something we should mention in the documentation? I don't quite understand.

And what do we see in the screenshots? What does it all have to do with es-module-shims.js?

[python-and-fiction]

And what do we see in the screenshots? What does it all have to do with es-module-shims.js?

The es-module and the other component which uses module syntax are not compatible with IE.

Because of VUE3 dropping the compatibility of IE11. See it in https://vuejs.org/about/faq#what-s-the-difference-between-vue-2-and-vue-3
On Windows, pywebview renderer is chosen in the following order: edgechromium, mshtml.Iguess that he doesn't correctly install webview2 on his Windows.
So,writing how to make sure webview2 installed on Windows and the link to https://pywebview.flowrl.com/guide/web_engine.html#known-issues-and-limitations in https://nicegui.io/documentation/section_configuration_deployment#native_mode is better.
And we can write a example about app.native.start_args['gui'],such as :

app.native.start_args['gui'] = 'edgechromium' 
# For 'gui' arg,you needn't assign it usually,besides you want to change the render; 
#  'edgechromium' is best on Windows ;
# qt based is a litte heavy,but it can be used on Windows/Linux/Mac;
#  'qt' needs ["QtPy", "PyQt5", "pyqtwebengine"];
#  'pyside2' needs ["QtPy", "PySide2"];
#  'pyside6' needs ["QtPy", "PySide6"];

I don't think setting app.native.start_args['gui'] is a good idea, it may causes bugs in nicegui and pywebview has made lots of if to switch render.
BTW, https://github.com/zauberzeug/nicegui/blob/main/DEPENDENCIES.md shows dependencies which are used by nicegui. The developer should check the compatibility of them, but the problem behind to infra component is hard to find.

[terremoth]

I am facing this same problem and I tried many solutions with no success.
Guess isn't safe, yet, to use NiceGUI as native way to create desktop windows applications. But this doesn't seem like a NiceGUI problem at all, using the pywebview happens the same (NiceGUI uses pywebview behind the scenes).