Capacitor with Framework7 Core with bundler (Vite), cannot work on Android

I created a sample package with source code by using command “framework7 create --ui”, then generate couples of files and folders and load them on VScode. The package is built at the following options.

  1. Framework7 Core
  2. Simple web app
  3. Single view
  4. With bundler (Vite)
  5. “No, i am good with CSS” (traditional CSS)
  6. Integrate with Capacitor
  7. Add Android platform
  8. Sync & Build, then Run

It’s working fine on “web” simulator (see picture A). However, runs on Android emulator, it just shows a blank white page and there are 3 errors show on console (see picture B). They mean “Failed to load resource: the server responded with a status of 404”. Those missing files are “index-BjpLy5vT.css:1”, “index-Bv0G57S5.js:1” & “index-BjpLy5vT.css:1”.

For troubleshooting, I tried to create the package also using “framework7 create --ui” and generate the sample sources in condition “No bundler”. Both “Web” & “Android” platform are working properly. Does anyone get idea what is/are the fault?

Software version

  1. OpenJDK 17.0.9
  2. Node v21.7.3
  3. Npm 10.8.1
  4. Framework7 8.3.3
  5. Capacitor/android 6.1.0
  6. Capacitor/app 6.0.0
  7. Capacitor/cli 6.1.0
  8. Capacitor/core 6.1.0

Thank you for your replied.

1 Like