IOS webpackJsonp / 'const' / viewport-fit / vendor.js


#1

Hey Guys I’m having an issue building my App for IOS

My App Builds Successfully on Ionic, and on Xcode. After the Splash Screen the App don’t go further it stops because these js errors

This Error only happens on Device, it do not happen on emulator.

thats what coming on my Safari console

[Error] Viewport argument key "viewport-fit" not recognized and ignored. (index.html, line 9)
[Error] SyntaxError: Unexpected keyword 'const'. Const declarations are not supported in strict mode.
	(anonymous function) (vendor.js:1)
[Error] ReferenceError: Can't find variable: webpackJsonp
	Global Code (main.js:1)

Thats my HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="UTF-8">
  <title>Easy Change</title>
  <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">

  <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
  <link rel="manifest" href="manifest.json">
  <meta name="theme-color" content="#4e8ef7">

  <!-- add to homescreen for ios -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">

  <!-- cordova.js required for cordova apps (remove if not needed) -->
  <script src="cordova.js"></script>

  <!-- un-comment this code to enable service worker
  <script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('service-worker.js')
        .then(() => console.log('service worker installed'))
        .catch(err => console.error('Error', err));
    }
  </script>-->

  <link href="build/main.css" rel="stylesheet">

</head>
<body>
  <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Intl.~locale.en"></script>
  <!-- Ionic's root component and where the app will load -->
  <ion-app></ion-app>

  <!-- The polyfills js is generated during the build process -->
  <script src="build/polyfills.js"></script>

  <!-- The vendor js is generated during the build process
       It contains all of the dependencies in node_modules -->
  <script src="build/vendor.js"></script>

  <!-- The main bundle js is generated during the build process -->
  <script src="build/main.js"></script>

</body>
</html>

thats my INFO

cli packages: (/usr/local/lib/node_modules)

    @ionic/cli-utils  : 1.19.2
    ionic (Ionic CLI) : 3.20.0

global packages:

    cordova (Cordova CLI) : 8.0.0 

local packages:

    @ionic/app-scripts : 3.1.10
    Cordova Platforms  : ios 4.5.4
    Ionic Framework    : ionic-angular 3.9.2

System:

    ios-deploy : 1.9.2 
    Node       : v8.11.1
    npm        : 5.6.0 
    OS         : macOS High Sierra
    Xcode      : Xcode 9.4.1 Build version 9F2000 

Environment Variables:

    ANDROID_HOME : not set

Misc:

    backend : pro

package.json

{
  "name": "myApp",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/animations": "^5.2.11",
    "@angular/common": "^5.2.11",
    "@angular/compiler": "^5.2.11",
    "@angular/compiler-cli": "^5.2.11",
    "@angular/core": "^5.2.11",
    "@angular/forms": "^5.2.11",
    "@angular/http": "^5.2.11",
    "@angular/platform-browser": "^5.2.11",
    "@angular/platform-browser-dynamic": "^5.2.11",
    "@angular/platform-server": "^5.2.11",
    "@angular/router": "^5.2.11",
    "@ionic-native/action-sheet": "4.9.0",
    "@ionic-native/background-mode": "4.9.0",
    "@ionic-native/barcode-scanner": "4.9.0",
    "@ionic-native/camera": "4.9.0",
    "@ionic-native/clipboard": "4.9.0",
    "@ionic-native/contacts": "4.9.0",
    "@ionic-native/core": "4.9.0",
    "@ionic-native/crop": "4.9.0",
    "@ionic-native/device": "4.9.0",
    "@ionic-native/facebook": "4.9.0",
    "@ionic-native/fingerprint-aio": "4.9.0",
    "@ionic-native/geolocation": "4.9.0",
    "@ionic-native/google-plus": "4.9.0",
    "@ionic-native/ionic-webview": "^5.0.0-beta.11",
    "@ionic-native/sms": "4.9.0",
    "@ionic-native/social-sharing": "4.9.0",
    "@ionic-native/splash-screen": "4.9.0",
    "@ionic-native/status-bar": "4.9.0",
    "@ionic/pro": "1.0.20",
    "@ionic/storage": "2.1.3",
    "angular2-qrcode": "^2.0.1",
    "angularfire2": "^5.0.0-rc.11",
    "brmasker-ionic-3": "^1.1.0",
    "cordova-clipboard": "^1.2.1",
    "cordova-ios": "4.5.4",
    "cordova-plugin-actionsheet": "^2.3.3",
    "cordova-plugin-add-swift-support": "^1.7.2",
    "cordova-plugin-background-mode": "^0.7.2",
    "cordova-plugin-camera": "^4.0.3",
    "cordova-plugin-contacts": "^3.0.1",
    "cordova-plugin-crop": "^0.4.0",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-facebook4": "^2.2.0",
    "cordova-plugin-fingerprint-aio": "^1.3.8",
    "cordova-plugin-geolocation": "^4.0.1",
    "cordova-plugin-googleplus": "^5.3.0",
    "cordova-plugin-ionic-keyboard": "^2.0.5",
    "cordova-plugin-ionic-webview": "^1.1.19",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "cordova-plugin-x-socialsharing": "^5.4.1",
    "cordova-sms-plugin": "^0.1.11",
    "es6-promise-plugin": "^4.2.2",
    "firebase": "^5.1.0",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "moment": "^2.22.2",
    "otplib": "^8.0.1",
    "phonegap-plugin-barcodescanner": "^8.0.0",
    "rxjs": "5.5.11",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.1.10",
    "typescript": "~2.6.2"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-actionsheet": {},
      "cordova-clipboard": {},
      "cordova-plugin-fingerprint-aio": {},
      "cordova-plugin-geolocation": {
        "GEOLOCATION_USAGE_DESCRIPTION": "To locate you"
      },
      "cordova-plugin-x-socialsharing": {},
      "phonegap-plugin-barcodescanner": {},
      "cordova-plugin-camera": {},
      "cordova-plugin-contacts": {},
      "cordova-plugin-device": {},
      "cordova-plugin-crop": {},
      "cordova-plugin-googleplus": {
        "REVERSED_CLIENT_ID": "123456.apps.googleusercontent.com"
      },
      "cordova-plugin-facebook4": {
        "APP_ID": "123456",
        "APP_NAME": "myApp"
      },
      "cordova-sms-plugin": {},
      "cordova-plugin-background-mode": {},
      "cordova-plugin-whitelist": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {},
      "cordova-plugin-ionic-keyboard": {}
    },
    "platforms": [
      "ios"
    ]
  }
}


#2

I was hoping it was “TypeScript too new”, but doesn’t look that way. I believe the proximate cause is that you have some dependency that is trying to feed untranspiled ES6 straight into webpack. Does that seem like a possibility to you?


#3

updated :slight_smile:


#4

I have uninstalled everything, and installed one by one all the plugins and modules that I need, and I found that
the otplib, firebase, angularfire2 are injecting something into my webpack thats why I’m having this error, but now I need to solve that incompatibility :confused: I need firebase and angularfire2 for firebase auth and my otplib to auth with my server :3


#5

solved the issue removing only OTPLIB and updating the other ones :slight_smile: thanks so much