[f7-cli] White screen on cordova compiled app

Questions
1

Hello, when compile an app with build-cordova i get a white screen on the phone.
I tested most default settings but still happen; using webpack on previous version works normal.

Create via framework7-cli using:

framework7 create --ui --port 80

framework7.json

{
  "cwd": "/home/framework7/TestApp",
  "type": [
    "cordova"
  ],
  "name": "My App",
  "framework": "core",
  "template": "tabs",
  "bundler": "vite",
  "cssPreProcessor": "less",
  "theming": {
    "customColor": false,
    "color": "#007aff",
    "darkTheme": true,
    "iconFonts": true,
    "fillBars": true
  },
  "customBuild": false,
  "pkg": "io.framework7.myapp",
  "cordova": {
    "folder": "cordova",
    "platforms": [
      "android"
    ],
    "plugins": [
      "cordova-plugin-statusbar",
      "cordova-plugin-keyboard",
      "cordova-plugin-splashscreen",
      "cordova-plugin-device",
      "cordova-plugin-inappbrowser"
    ]
  }
}

Note: If you select dark mode vite show:

1:14:45 PM [vite] Internal server error: Unable to parse {"file":"/index.html","line":27,"column":16}
25 |  </head>
26 |  <body>
27 |    <div id="app"class="theme-dark"></div>

Just add an space between class and the id.

package.json

{
  "name": "my-app",
  "private": true,
  "version": "1.0.0",
  "description": "My App",
  "repository": "",
  "license": "UNLICENSED",
  "scripts": {
    "start": "npm run dev",
    "dev": "cross-env NODE_ENV=development vite",
    "build": "cross-env NODE_ENV=production vite build",
    "build-cordova": "cross-env TARGET=cordova cross-env NODE_ENV=production vite build && cd cordova && cordova build",
    "postinstall": "cpy ./node_modules/framework7-icons/fonts/*.* ./src/fonts/ && cpy ./node_modules/material-icons/iconfont/*.* ./src/fonts/"
  },
  "browserslist": [
    "Android >= 7",
    "IOS >= 11",
    "Safari >= 11",
    "Chrome >= 49",
    "Firefox >= 31",
    "Samsung >= 5"
  ],
  "dependencies": {
    "dom7": "^3.0.0",
    "framework7": "^6.1.1",
    "framework7-icons": "^4.0.2",
    "material-icons": "^1.0.1",
    "skeleton-elements": "^3.4.0",
    "swiper": "^6.8.0"
  },
  "devDependencies": {
    "cpy-cli": "^3.1.1",
    "cross-env": "^7.0.3",
    "less": "^4.1.1",
    "postcss-preset-env": "^6.7.0",
    "rollup-plugin-framework7": "^1.1.0",
    "vite": "^2.4.4",
    "vite-plugin-html": "^2.0.7"
  }
}

Works fine on the dev server runnig
npm start

but compiled apk not.

Chrome inspect via adb show:

index.930ecb49.js:1 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "". Strict MIME type checking is enforced for module scripts per HTML spec.
vendor.96b2f8d1.js:1 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "". Strict MIME type checking is enforced for module scripts per HTML spec.

Android 8 (Using chrome 92 webview)
npm --version
7.20.2

framework7 --version
5.0.1

cordova --version
10.0.0

2

I think it is because Cordova’s webview on Chrome doesn’t support ES Modules (which are produced by Vite). Solution is to:

1 Like
3

@NT5 @nolimits4web what hostname have and scheme have you set to make it work properly with a basic framework7 template?

4

what hostname have and scheme have

it doesn’t really matter, if you have that cordova-plugin-ionic-webview plugin installed, and it should work with default values too

1 Like
5

I just use Capacitor, i tested with cordova-plugin-ionic-webview and it’s work just fine

1 Like
7

i used last version f7-cli for cordova. add plugin cordova-plugin-ionic-webview. But this error save.

“dependencies”: {
“cordova-plugin-ionic-webview”: “^5.0.0”,
“dom7”: “^3.0.0”,
“framework7”: “^6.3.2”,
“framework7-icons”: “^5.0.3”,
“inputmask”: “^5.0.6”,
“material-icons”: “^1.2.1”,
“skeleton-elements”: “^3.5.0”,
“swiper”: “^6.8.4”
},
“devDependencies”: {
“cpy-cli”: “^3.1.1”,
“cross-env”: “^7.0.3”,
“less”: “^4.1.1”,
“postcss-preset-env”: “^6.7.0”,
“rollup-plugin-framework7”: “^1.2.0”,
“vite”: “^2.5.3”,
“vite-plugin-html”: “^2.1.0”
}

How solve problem?