webpackJsonp not found on Android device running 4.4.3

Ionic Framework ionic-v3
1

Hi all,

I’m working on an app using Ionic 3 and a variety of cordova plugins at the moment and have found that it doesn’t seem to be able to get off the splash screen on older Android devices, and we get the two below errors.

Uncaught SyntaxError: Unexpected token {                     [ vendor.js:1 ]
Uncaught ReferenceError: webpackJsonp is not defined         [ main.js:1   ]

I’ve had a google and trawled stackoverflow and whatnot and it seems to be that there’s an issue with the way the webviews work up to 4.4.4 and how they interact with clipboard plugins, and we are using the ngx-clipboard plugin to manage, surprisingly, the user’s ability to copy and share content from the app.

I’m at a complete loss with this and wondering whether it would be better just to not support Android 4.x or if there is a fix out there that simply hasn’t been documented yet?

If someone could advise or offer some assistance that would be much appreciated.

[EDIT]: I forgot to mention that it’s only on this version of Android that we’re getting the issue. It works fine on the others and on iOS also

2

Likely your installation is old and not defining vendor.js. Make sure you’ve updated, and read the changelogs.

3

Just to second what @AaronSterling has stated, the error means that JS is not loading in the correct order. I’d double check your src/index.html to make sure it’s in the correct order

4

See below for the markup on index.html. As far as I understand, this is loading the scripts in in the correct order?

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="UTF-8">
  <title>APP NAME</title>
  <meta name="viewport" viewport-fit="cover" content="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">

  <!-- cordova.js required for cordova apps -->
  <script src="cordova.js"></script>

    <!-- Facebook Pixel Code -->
    <!-- STUBBED -->
    <!-- End Facebook Pixel Code -->


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

</head>
<body>

  <!-- Ionic's root component and where the app will load -->
  <ion-app></ion-app>

  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDJoa-hx3adAA2RjmYHDk89rE7PI40cJ0o&libraries=places"></script>

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

I would attempt to put the google maps script below everything. As it can block requests

6

Moved the google api script right to the bottom but still getting the same issue.

7

I encounter the same problem.
The root cause of mine is that one of the dependency @feathersjs/feathers does not work well with webpack. Remove it resolve the issue.

So maybe you can check your node modules and see if any module has a problem.

8

I see you commented out Facebook Pixel in head html, does it work on Ionic?
My customer want to use it.