WebpackJsonp is not defined error at run-time

[bfv]

Tell us about the problem

When using webpack the build process works perfectly OK. When I upload it to the playstore (as alfa release) I get errors on several devices in the pre-launch report. Some physical devices give the same errors upon start of the app. When I upload the normal tns run build version to the playstore are no issues. The webpack build gives problems with and without the --uglify flag.

Did you verify this is a real problem by searching [Stack Overflow]

This issue resembles #247 but the solution offered isn't applicable (plugin nativescript-dev-android-snapshot isn't used)

Which platform(s) does your issue occur on?

Android

Please provide the following version numbers that your issue occurs with:

┌──────────────────┬─────────────────┬────────────────┬─────────────┐
│ Component        │ Current version │ Latest version │ Information │
│ nativescript     │ 3.2.1           │ 3.2.1          │ Up to date  │
│ tns-core-modules │ 3.2.0           │ 3.2.0          │ Up to date  │
│ tns-android      │ 3.2.0           │ 3.2.0          │ Up to date  │
│ tns-ios          │ 3.2.0           │ 3.2.0          │ Up to date  │
└──────────────────┴─────────────────┴────────────────┴─────────────┘

  "dependencies": {
    "@angular/common": "~4.3.6",
    "@angular/compiler": "~4.3.6",
    "@angular/core": "~4.3.6",
    "@angular/forms": "~4.3.6",
    "@angular/http": "~4.3.6",
    "@angular/platform-browser": "~4.3.6",
    "@angular/router": "~4.3.6",
    "@ngrx/core": "^1.2.0",
    "@ngrx/store": "^4.0.3",
    "email-validator": "^1.1.1",
    "jwt-decode": "^2.2.0",
    "nativescript-angular": "~4.2.0",
    "nativescript-clipboard": "^1.1.7",
    "nativescript-loading-indicator": "^2.3.2",
    "nativescript-ngx-fonticon": "^2.2.3",
    "nativescript-telerik-ui": "^3.1.0",
    "nativescript-theme-core": "~1.0.4",
    "nativescript-urlhandler": "^1.2.1",
    "reflect-metadata": "~0.1.10",
    "rxjs": "~5.4.3",
    "tns-core-modules": "~3.2.0",
    "zone.js": "~0.8.17"
  },
  "devDependencies": {
    "@angular/compiler-cli": "~4.3.6",
    "@ngtools/webpack": "~1.6.2",
    "@types/jwt-decode": "^2.2.1",
    "babel-traverse": "6.26.0",
    "babel-types": "6.26.0",
    "babylon": "6.18.0",
    "copy-webpack-plugin": "~4.0.1",
    "extract-text-webpack-plugin": "~3.0.0",
    "lazy": "1.0.11",
    "nativescript-css-loader": "~0.26.1",
    "nativescript-dev-typescript": "~0.5.0",
    "nativescript-dev-webpack": "^0.8.0",
    "nativescript-worker-loader": "~0.8.1",
    "raw-loader": "~0.5.1",
    "resolve-url-loader": "~2.1.0",
    "typescript": "~2.5.2",
    "webpack": "~3.5.6",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-sources": "~1.0.1"
  },

Please tell us how to recreate the issue in as much detail as possible.

After running a webpack build (--snapshot --uglify) on most (but not all) devices the follwing error occurs when starting the app:

10-24 10:49:48.169: E/AndroidRuntime(17732): FATAL EXCEPTION: main
10-24 10:49:48.169: E/AndroidRuntime(17732): Process: nl.flusso.vitam, PID: 17732
10-24 10:49:48.169: E/AndroidRuntime(17732): java.lang.RuntimeException: Unable to create application com.tns.NativeScriptApplication: com.tns.NativeScriptException: 
10-24 10:49:48.169: E/AndroidRuntime(17732): Error calling module function 
10-24 10:49:48.169: E/AndroidRuntime(17732): ReferenceError: webpackJsonp is not defined
10-24 10:49:48.169: E/AndroidRuntime(17732): File: "file:///data/data/nl.flusso.vitam/files/app/tns-java-classes.js, line: 1, column: 60
10-24 10:49:48.169: E/AndroidRuntime(17732): StackTrace: 
10-24 10:49:48.169: E/AndroidRuntime(17732): 	Frame: function:'', file:'file:///data/data/nl.flusso.vitam/files/app/tns-java-classes.js', line: 1, column: 61
10-24 10:49:48.169: E/AndroidRuntime(17732): 	Frame: function:'require', file:'', line: 1, column: 266
10-24 10:49:48.169: E/AndroidRuntime(17732): ReferenceError: webpackJsonp is not defined

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

Can't share the repo since it contain all sorts of building script (including keys). The build is run as:

npm run build-android-bundle --uglify --snapshot -- --release

(with deployment cert stuff added as well)

[NickIliev]

@bfv Can you try to update the Angular and WebPack related dependencies to the latest and bundle your application with reset webpack.config.js.

The steps to easily update all related dependencies.

cd myApp
npm install
cd node_modules/nativescript-angular/bin
./update-app-ng-deps
cd ../../../
cd node_modules/nativescript-dev-webpack/bin
./update-ns-webpack
cd ../../../
rm -rf webpack.config.js
npm - nativescript-dev-webpack --save-dev
npm install

npm run build-android-bundle --uglify --snapshot -- --release

[bfv]

Well, what you are suggesting isn't really possible because webpack.config.js is under version control. We had to edit it because of other webpack related stuff. Attached webpack.config.js.

webpack.config.zip

[slmolloy]

Any update on this? We are having the same issue and also have a modified webpack.config.js.

We install and test builds on a variety of devices. We get the same app crash on launch consistently on the same set of Android devices while other devices work fine.

[slmolloy]

Update on this issue: on one of the devices where this error was occurring, I did a factory reset and reinstalled the app and it is working now. Obviously this isn't a solution for users but maybe it will help with root causing.

[erkanarslan]

@NickIliev I tried your method but it didn't create a new webpack.config.js file and I had to restore it from a copy.

I installed nativescript-dev-webpack a few days ago and I also get this error. But it occurs only if I build the app with --snapshot flag. If I don't put that flag there is no problem.

[slmolloy]

We removed the --snapshot flag a while ago but are still seeing this issue. This issue showed up on a Pixel API 25 emulator. I deleted and recreated the emulator and the issue went away. Is it possible something in the webpack/ns-build is writing to storage that doesn't get cleaned up properly on app re/uninstall?

[erkanarslan]

@slmolloy I also had this problem. When I removed android folder under platforms folder, it worked. I think clean up problem is not in the device but in development environment.

[slmolloy]

We had tried that, removing platforms, hooks and node_modules then reinstalling dependencies and building fresh. Additionally, we have a CI pipeline in place for our project and the same build installed on different devices would provide different results. On devices where the crash was occurring, new builds would still fail. The exact same build could be installed on a device that was working fine and it would continue to work fine. It really seems like there is an issue with the install/uninstall process when using webpack.

[NickIliev]

@slmolloy are you still experiencing this issue with the latest nativescript-dev-webpack.

[slmolloy]

We never were able to root cause why the issue showed up in the first place. We were experiencing a similar situation leading to a crash in our iOS app. The iOS crash message provided different information and we were able to fix the issue with additional variable checks and state cleanup on app startup. When we fixed the iOS crash the Android crash also went away so they appear to have been related.

[farzeni]

Same issue here on my current project and also with a brand new project created with sidekick.

Sidekick: 1.2.0-v.2018.1.22. (New project with ng+sidedrawer)
Nativescript: 3.4.1

package.json

{
  "description": "NativeScript Application",
  "license": "SEE LICENSE IN <your-license-filename>",
  "readme": "NativeScript Application",
  "repository": "<fill-your-repository-here>",
  "nativescript": {
    "id": "org.nativescript.testSideKick",
    "tns-android": {
      "version": "3.4.1"
    }
  },
  "scripts": {
    "lint": "tslint \"app/**/*.ts\""
  },
  "dependencies": {
    "@angular/animations": "~5.2.0",
    "@angular/common": "~5.2.0",
    "@angular/compiler": "~5.2.0",
    "@angular/core": "~5.2.0",
    "@angular/forms": "~5.2.0",
    "@angular/http": "~5.2.0",
    "@angular/platform-browser": "~5.2.0",
    "@angular/platform-browser-dynamic": "~5.2.0",
    "@angular/router": "~5.2.0",
    "nativescript-angular": "~5.2.0",
    "nativescript-pro-ui": "~3.3.0",
    "nativescript-theme-core": "~1.0.4",
    "reflect-metadata": "~0.1.10",
    "rxjs": "^5.5.0",
    "tns-core-modules": "~3.4.0",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@angular/compiler-cli": "~5.2.0",
    "@ngtools/webpack": "~1.9.1",
    "babel-traverse": "6.26.0",
    "babel-types": "6.26.0",
    "babylon": "6.18.0",
    "codelyzer": "~4.0.2",
    "copy-webpack-plugin": "~4.3.0",
    "css-loader": "~0.28.7",
    "extract-text-webpack-plugin": "~3.0.2",
    "lazy": "1.0.11",
    "nativescript-dev-sass": "~1.3.5",
    "nativescript-dev-typescript": "~0.6.0",
    "nativescript-dev-webpack": "0.9.1",
    "nativescript-worker-loader": "~0.8.1",
    "raw-loader": "~0.5.1",
    "resolve-url-loader": "~2.2.1",
    "sass-loader": "~6.0.6",
    "tslint": "~5.8.0",
    "typescript": "~2.6.2",
    "uglifyjs-webpack-plugin": "~1.1.6",
    "webpack": "~3.10.0",
    "webpack-bundle-analyzer": "^2.9.1",
    "webpack-sources": "~1.1.0"
  }
}

output:
log.txt

[jogboms]

@NickIliev started experiencing this on an already existing project

tns build android --bundle --env.uglify --env.aot --env.report --release

[NickIliev]

@jogboms can you provide a sample project? Contact me on personal if you can't create public link (community slack: niliev)