webpackJsonp is not defined on iOS 10 only (iOS 11 working)


#1

Hello,

I have a problem where my project runs fine on iOS 11 emulator but when I test it with the iOS 10 I get the following error:

To run on iOS 10 I do:
ionic cordova emulate ios --target=“iPhone-6s, 10.2” -c

To run on iOS 11 I do:
ionic cordova emulate ios --target=“iPhone-X, 11.2” -c

The application shows the splash screen then when it enters to the first page it freezes.

My index.html is referencing the correct scripts:

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="UTF-8">
  <title>Ionic App</title>
  <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <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>

  <!-- 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>

Any idea on what could be the problem?

Thanks!

(ionic info and package.json below this line)

$ ionic info

cli packages: (/Users/MyUser/.nvm/versions/node/v7.10.0/lib/node_modules)

    @ionic/cli-utils  : 1.19.1
    ionic (Ionic CLI) : 3.19.1

global packages:

    cordova (Cordova CLI) : 7.1.0

local packages:

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

System:

    ios-deploy : 1.9.2
    ios-sim    : 6.1.2
    Node       : v7.10.0
    npm        : 4.2.0
    OS         : macOS Sierra
    Xcode      : Xcode 9.2 Build version 9C40b

Environment Variables:

    ANDROID_HOME : not set

Misc:

    backend : legacy

package.json

"dependencies": {
    "@angular/animations": "5.0.3",
    "@angular/common": "5.0.3",
    "@angular/compiler": "5.0.3",
    "@angular/compiler-cli": "5.0.3",
    "@angular/core": "5.0.3",
    "@angular/forms": "5.0.3",
    "@angular/http": "5.0.3",
    "@angular/platform-browser": "5.0.3",
    "@angular/platform-browser-dynamic": "5.0.3",
    "@ionic-native/app-version": "^4.5.3",
    "@ionic-native/broadcaster": "^4.5.3",
    "@ionic-native/camera": "^4.5.3",
    "@ionic-native/core": "4.4.0",
    "@ionic-native/date-picker": "^4.5.3",
    "@ionic-native/facebook": "^4.5.3",
    "@ionic-native/in-app-browser": "^4.5.3",
    "@ionic-native/in-app-purchase": "^4.5.3",
    "@ionic-native/keyboard": "^4.5.3",
    "@ionic-native/local-notifications": "^4.5.3",
    "@ionic-native/pin-dialog": "^4.5.3",
    "@ionic-native/splash-screen": "4.4.0",
    "@ionic-native/status-bar": "4.4.0",
    "@ionic/storage": "^2.1.3",
    "@types/bcryptjs": "^2.4.1",
    "bcryptjs": "^2.4.3",
    "cordova-plugin-app-version": "~0.1.9",
    "cordova-plugin-broadcaster": "~3.0.1",
    "cordova-plugin-camera": "~2.4.1",
    "cordova-plugin-datepicker": "~0.9.3",
    "cordova-plugin-device": "^1.1.4",
    "cordova-plugin-facebook4": "~1.9.1",
    "cordova-plugin-inappbrowser": "~1.7.1",
    "cordova-plugin-inapppurchase": "~1.1.0",
    "cordova-plugin-ionic-webview": "^1.1.16",
    "cordova-plugin-pin-dialog": "~0.1.3",
    "cordova-plugin-splashscreen": "^4.0.3",
    "cordova-plugin-statusbar": "^2.2.1",
    "cordova-plugin-whitelist": "^1.3.1",
    "de.appplant.cordova.plugin.local-notification": "~0.8.5",
    "ionic-angular": "3.9.2",
    "ionic-cache": "^2.0.5",
    "ionic-plugin-keyboard": "~2.2.1",
    "ionicons": "3.0.0",
    "metascraper": "^3.7.3",
    "moment": "^2.20.1",
    "moment-timezone": "^0.5.14",
    "require-from-string": "^2.0.1",
    "rxjs": "5.5.2",
    "slug": "^0.9.1",
    "sw-toolbox": "3.6.0",
    "ts-md5": "^1.2.4",
    "xml2js": "^0.4.19",
    "zone.js": "0.8.18",
    "cordova-ios": "~4.5.4"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.1.8",
    "typescript": "2.4.2"
  },

#2

see this post, you need to wait til cordova is ready

https://forum.ionicframework.com/t/tcp-sockets-in-ionic/67806/15?u=sdetweil


#3

I wait for all the cordova elements to be loaded but I still get the error, thanks!


#4

I have logged the app using the emulator & safari browser and found that on vendor.js there’s:

const create = loader => {
  return async ({url, html} = {}) => { 

The line return async ({url, html} = {}) => { throws an exception of “Unexpected token ‘=>’”. I have tried editing using webpack.config.json with babel but it appear that’s not transpiling anything:

/*
 * The webpack config exports an object that has a valid webpack configuration
 * For each environment name. By default, there are two Ionic environments:
 * "dev" and "prod". As such, the webpack.config.js exports a dictionary object
 * with "keys" for "dev" and "prod", where the value is a valid webpack configuration
 * For details on configuring webpack, see their documentation here
 * https://webpack.js.org/configuration/
 */

var path = require('path');
var webpack = require('webpack');
var ionicWebpackFactory = require(process.env.IONIC_WEBPACK_FACTORY);

var ModuleConcatPlugin = require('webpack/lib/optimize/ModuleConcatenationPlugin');
var PurifyPlugin = require('@angular-devkit/build-optimizer').PurifyPlugin;

var optimizedProdLoaders = [
  {
    test: /\.json$/,
    loader: 'json-loader'
  },
  {
    test: /\.js$/,
    loader: [
      {
        loader: 'babel-loader',
        options: {
          presets: ['babel-preset-env']
        }
      },

      {
        loader: process.env.IONIC_CACHE_LOADER
      },

      {
        loader: '@angular-devkit/build-optimizer/webpack-loader',
        options: {
          sourceMap: true
        }
      },

    ]
  },
  {
    test: /\.ts$/,
    loader: [
      {
        loader: process.env.IONIC_CACHE_LOADER
      },

      {
        loader: '@angular-devkit/build-optimizer/webpack-loader',
        options: {
          sourceMap: true
        }
      },

      {
        loader: process.env.IONIC_WEBPACK_LOADER
      }
    ]
  }
];

function getProdLoaders() {
  if (process.env.IONIC_OPTIMIZE_JS === 'true') {
    return optimizedProdLoaders;
  }
  return devConfig.module.loaders;
}

var devConfig = {
  entry: process.env.IONIC_APP_ENTRY_POINT,
  output: {
    path: '{{BUILD}}',
    publicPath: 'build/',
    filename: '[name].js',
    devtoolModuleFilenameTemplate: ionicWebpackFactory.getSourceMapperFunction(),
  },
  devtool: process.env.IONIC_SOURCE_MAP_TYPE,

  resolve: {
    extensions: ['.ts', '.js', '.json'],
    modules: [path.resolve('node_modules')]
  },

  module: {
    loaders: [
      {
        test: /\.json$/,
        loader: 'json-loader'
      },
      {
        test: /\.ts$/,
        loader: process.env.IONIC_WEBPACK_LOADER
      },
      {
        test: /\.js$/,
        exclude: path.resolve('node_modules'),
        use: {
            loader: 'babel-loader',
            options: {
              presets: ['babel-preset-env']
            }
        }
      }
    ]
  },

  plugins: [
    ionicWebpackFactory.getIonicEnvironmentPlugin(),
    ionicWebpackFactory.getCommonChunksPlugin()
  ],

  // Some libraries import Node modules but don't use them in the browser.
  // Tell Webpack to provide empty mocks for them so importing them works.
  node: {
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
    module: 'empty'
  }
};

var prodConfig = {
  entry: process.env.IONIC_APP_ENTRY_POINT,
  output: {
    path: '{{BUILD}}',
    publicPath: 'build/',
    filename: '[name].js',
    devtoolModuleFilenameTemplate: ionicWebpackFactory.getSourceMapperFunction(),
  },
  devtool: process.env.IONIC_SOURCE_MAP_TYPE,

  resolve: {
    extensions: ['.ts', '.js', '.json'],
    modules: [path.resolve('node_modules')]
  },

  module: {
    loaders: getProdLoaders()
  },

  plugins: [
    ionicWebpackFactory.getIonicEnvironmentPlugin(),
    ionicWebpackFactory.getCommonChunksPlugin(),
    new ModuleConcatPlugin(),
    new PurifyPlugin()
  ],

  // Some libraries import Node modules but don't use them in the browser.
  // Tell Webpack to provide empty mocks for them so importing them works.
  node: {
    fs: 'empty',
    net: 'empty',
    tls: 'empty'
  }
};


module.exports = {
  dev: devConfig,
  prod: prodConfig
}

Any ideas?


#5

hi, did you get a solution for this? Have been wasting lot of time on this
created this https://stackoverflow.com/questions/49787290/ionic-webpackjsonp-is-not-defined


#6

The problem was with a third party library metascraper.js.org. Solved using ^1.0.7 version.