White screen when npm run tauri dev

[PontusTideman]

Hi!

Have updated the package.json and also the Cargo to the latest version, Rust and everything is up2date. But when I run npm run tauri dev, it just opens up a white screen on macOS Sonoma.

Have trying to pin point out what is causing this, but unable to find a solution for it that works. O_o

Any tip?

[AbdelilahOu]

Hello @PontusTideman I have just cloned the app into a new folder to see if i will get the same white screen, but the white screen didn't last long it was just vite optimizing dependencies but it works fine after a few seconds. Also I have some suspicion if you run the app for the very first time it will take some time to load because in the migrations filer I have a migration to seed the database with some data if you navigate to \src-tauri\migration\src\lib.rs and you can comment Box::new(m20240216_201704_seed_init_::Migration), so that the app starts immediately without data I hope this helps

[PontusTideman]

Hi @AbdelilahOu!

Will test it again later today/tomorrow to let it run longer to see if it works like you say. 😊

[PontusTideman]

A quick follow-up here:

And after I´ve comment out the line I´m getting this: Finisheddevprofile [unoptimized + debuginfo] target(s) in 3m 54s thread 'main' panicked at src/main.rs:26:40: calledResult::unwrap()on anErrvalue: Custom("Migration file of version 'm20240216_201704_seed_init_' is missing, this migration has been applied but its file is missing")

So that was a NO GO. ;D

This is what I´m seeing when I start it and then check the code.

[AbdelilahOu]

Ow i see so the white screen wasn't because of the migrations taking long since they were already applied (uncomment that line plz), so the error is being caused by the vue-router, Im using this package unplugin-vue-router to have s file system routing inside vue 3 app, Can you share the package.json that you updated I will see if I will get same error and try to resolve it

[PontusTideman]

{
  "name": "mahalli",
  "version": "1.4.6",
  "private": true,
  "author": "abdelilah ouaadouch",
  "description": "inventory & invoicing management app",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "run-p type-check build-only",
    "preview": "vite preview",
    "build-only": "vite build",
    "type-check": "vue-tsc --build --force",
    "tauri": "tauri",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
  },
  "dependencies": {
    "@pdf-lib/fontkit": "^1.1.1",
    "@tauri-apps/api": "^1.6.0",
    "@unovis/ts": "^1.4.3",
    "@unovis/vue": "^1.4.3",
    "@vee-validate/zod": "^4.13.2",
    "@vueuse/core": "^10.11.1",
    "@vueuse/motion": "^2.2.3",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.1",
    "lucide-vue-next": "^0.427.0",
    "pdf-lib": "^1.17.1",
    "radix-vue": "^1.9.4",
    "tailwind-merge": "^2.5.2",
    "tailwindcss-animate": "^1.0.7",
    "tauri-plugin-log-api": "github:tauri-apps/tauri-plugin-log#v1",
    "v-calendar": "^3.1.2",
    "vee-validate": "^4.13.2",
    "vite-svg-loader": "^5.1.0",
    "vue": "^3.4.37",
    "vue-i18n": "^9.13.1",
    "vue-router": "^4.4.3",
    "vue-sonner": "^1.1.4",
    "zod": "^3.23.8"
  },
  "devDependencies": {
    "@intlify/unplugin-vue-i18n": "^4.0.0",
    "@rushstack/eslint-patch": "^1.10.4",
    "@tauri-apps/cli": "^1.6.0",
    "@trunkio/launcher": "^1.3.1",
    "@tsconfig/node20": "^20.1.4",
    "@types/node": "^22.3.0",
    "@vitejs/plugin-vue": "^5.1.2",
    "@vue/eslint-config-prettier": "^9.0.0",
    "@vue/eslint-config-typescript": "^13.0.0",
    "@vue/tsconfig": "^0.5.1",
    "autoprefixer": "^10.4.20",
    "eslint": "^9.9.0",
    "eslint-plugin-vue": "^9.27.0",
    "npm-run-all": "^4.1.5",
    "postcss": "^8.4.41",
    "prettier": "^3.3.3",
    "tailwind-scrollbar": "^3.1.0",
    "tailwindcss": "^3.4.10",
    "typescript": "~5.5.4",
    "unplugin-auto-import": "^0.18.2",
    "unplugin-vue-router": "^0.10.3",
    "vite": "^5.4.0",
    "vue-tsc": "^2.0.29"
  }
}

[AbdelilahOu]

I as I suspected the issue was from unplugin-vue-router the changes that you have to do are:

1. go to env.d.ts in root dir and copy past this code:

   /// <reference types="vite/client" />
   /// <reference types="unplugin-vue-router/client" />

2. go to src\router\index.ts and copy past this code:

   
   import { createRouter, createWebHistory } from "vue-router";
   import { routes, handleHotUpdate } from "vue-router/auto-routes";

export const router = createRouter({ history: createWebHistory(),

routes, });

// This will update routes at runtime without reloading the page if (import.meta.hot) { handleHotUpdate(router); }

4. lastly go to `src\main.ts` and update line 5 to:
```ts
import { router } from "./router";

[PontusTideman]

The error I´m getting on history: createWebHistory(), is:

Argument of type '{ history: RouterHistory; }' is not assignable to parameter of type 'RouterOptions'. Property 'routes' is missing in type '{ history: RouterHistory; }' but required in type 'RouterOptions'.ts(2345) vue-router.d.ts(1529, 5): 'routes' is declared here.

So I checked here https://uvr.esm.is/introduction.html#from-scratch, and they are not using vue-router/auto. Tried to changed it like that, but with no luck. ;D

Just wanted to give you all information that I´m facing to get it to run and what I see when trying. ;D

[AbdelilahOu]

@PontusTideman those are the steps I followed and It works now

[PontusTideman]

Ah, nice! Will check that on later and update you.

Cheers ;D

[AbdelilahOu]

I pushed the change to main branch btw you can just pull the changes.

Happy coding 😁

[PontusTideman]

That worked, but ended up with other blank screens and RemoteLayerTreeDrawingAreaProxyMac::scheduleDisplayLink(): page has no displayID on some pages. https://github.com/tauri-apps/tauri/issues/8511 is other facing the same bug.

When I try to open an invoice I´m getting a blank screen:

When I try to edit either an invoice or an order:

[AbdelilahOu]

It might be vue-routrr that is causing this issue so, change the history mode for vue router, go to src/routes/index.ts and change createWebHistory to createWebHashHistory and see if its gonna work