tauri-apps / tauri

Build smaller, faster, and more secure desktop and mobile applications with a web frontend.
https://tauri.app
Apache License 2.0
85.26k stars 2.58k forks source link

[bug] The debug build does not work (`npm run dev`), files are loaded, but the screen does not render (vite) #11160

Closed gynt closed 1 month ago

gynt commented 1 month ago

Describe the bug

When I run npm run dev, all files are loaded, e.g. CSS, .tsx files, so I get my background color. However, no html elements are rendered at all: main.tsx isn't run?. This same identical setup used to work 3 days ago. I received a Webview2 update from Windows yesterday and then it stopped working I think. There are no errors in the web console. Interestingly, release builds work just fine. The repo is here: https://github.com/UnofficialCrusaderPatch/UCP3-GUI

<html lang="en">
   <head><!--  I removed all and styles scripts --></head>
  <body class="col-12 bg-dark text-light">
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

Reproduction

UPDATE: Use a global scope await import() in your code (for importing development functionality).

Expected behavior

No response

Full tauri info output

[✔] Environment
    - OS: Windows 10.0.22631 X64
    ✔ WebView2: 129.0.2792.65
    ✔ MSVC: Visual Studio Community 2022
    ✔ rustc: 1.70.0 (90c541806 2023-05-31)
    ✔ cargo: 1.70.0 (ec8a8a0ca 2023-04-25)
    ✔ rustup: 1.26.0 (5af9b9484 2023-04-05)
    ✔ Rust toolchain: stable-x86_64-pc-windows-msvc (default)
    - node: 22.9.0
    - npm: 10.8.3

[-] Packages
    - tauri [RUST]: 1.7.1
    - tauri-build [RUST]: 1.5.3
    - wry [RUST]: 0.24.10
    - tao [RUST]: 0.16.9
    - @tauri-apps/api [NPM]: 1.6.0
    - @tauri-apps/cli [NPM]: 1.6.0 (outdated, latest: 1.6.2)

[-] App
    - build-type: bundle
    - CSP: default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data: asset: https://asset.localhost https://user-images.githubusercontent.com https://raw.githubusercontent.com https://discordapp.com/api/guilds/426318193603117057/widget.png
    - distDir: ../dist
    - devPath: http://localhost:5173/
    - framework: React
    - bundler: Vite

Stack trace

No response

Additional context

No response

gynt commented 1 month ago

I solved it. This line of code was causing the issue:

if (import.meta.env.DEV) {
  await import('../function/dev');
}

The code would set some functions in the globalThis.dev variable. The only issue remaining is, when did this stop working? We think it is because of a new Webview2 release by Microsoft, but we can't tell.

Turns out, it is the await in this code that is causing issues. Still not sure why that is suddenly an issue.

gynt commented 1 month ago

https://github.com/vitejs/vite/issues/18156#issuecomment-2368005382

https://github.com/vitejs/vite/issues/18156