Error in Webpack + UglifyJS 3

[NickIliev]

From @cmargulhano on October 6, 2017 11:51

After setting UglifyJS 3 according to #1011, everything works except to run the APP that causes this error:

10-05 16:48:53.260 16384 16384 F art : art/runtime/java_vm_ext.cc:470] from java.lang.Object com.tns.Runtime.callJSMethodNative(int, int, java.lang.String, int, boolean, java.lang.Object[]) 10-05 16:48:53.260 16384 16384 F art : art/runtime/java_vm_ext.cc:470] at com.tns.Runtime.callJSMethodNative(Native method) 10-05 16:48:53.260 16384 16384 F art : art/runtime/java_vm_ext.cc:470] at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1084) 10-05 16:48:53.260 16384 16384 F art : art/runtime/java_vm_ext.cc:470] at com.tns.Runtime.callJSMethodImpl(Runtime.java:966) 10-05 16:48:53.260 16384 16384 F art : art/runtime/java_vm_ext.cc:470] at com.tns.Runtime.callJSMethod(Runtime.java:953) 10-05 16:48:53.260 16384 16384 F art : art/runtime/java_vm_ext.cc:470] at com.tns.Runtime.callJSMethod(Runtime.java:937) 10-05 16:48:53.261 16384 16384 F art : art/runtime/java_vm_ext.cc:470] at com.tns.Runtime.callJSMethod(Runtime.java:929) 10-05 16:48:53.361 16384 16384 F art : art/runtime/runtime.cc:441] at com.tns.Runtime.callJSMethodNative(Native method) 10-05 16:48:53.361 16384 16384 F art : art/runtime/runtime.cc:441] at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1084) 10-05 16:48:53.361 16384 16384 F art : art/runtime/runtime.cc:441] at com.tns.Runtime.callJSMethodImpl(Runtime.java:966) 10-05 16:48:53.361 16384 16384 F art : art/runtime/runtime.cc:441] at com.tns.Runtime.callJSMethod(Runtime.java:953) 10-05 16:48:53.361 16384 16384 F art : art/runtime/runtime.cc:441] at com.tns.Runtime.callJSMethod(Runtime.java:937) 10-05 16:48:53.361 16384 16384 F art : art/runtime/runtime.cc:441] at com.tns.Runtime.callJSMethod(Runtime.java:929) 10-05 16:48:53.362 16384 16384 F art : art/runtime/runtime.cc:441] at com.tns.Runtime.callJSMethodNative(Native method) 10-05 16:48:53.362 16384 16384 F art : art/runtime/runtime.cc:441] at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1084) 10-05 16:48:53.362 16384 16384 F art : art/runtime/runtime.cc:441] at com.tns.Runtime.callJSMethodImpl(Runtime.java:966) 10-05 16:48:53.362 16384 16384 F art : art/runtime/runtime.cc:441] at com.tns.Runtime.callJSMethod(Runtime.java:953) 10-05 16:48:53.362 16384 16384 F art : art/runtime/runtime.cc:441] at com.tns.Runtime.callJSMethod(Runtime.java:937) 10-05 16:48:53.362 16384 16384 F art : art/runtime/runtime.cc:441] at com.tns.Runtime.callJSMethod(Runtime.java:929)

Copied from original issue: NativeScript/nativescript-angular#1026

[NickIliev]

@cmargulhano can you provide the content of your package.json file

[cmargulhano]

Hi @NickIliev Thanks for your feedback.

{
  "description": "XX",
  "license": "XX",
  "readme": "XX",
  "repository": "https://gitlab.xxenterprise.com/xx-innovation/enterprise-app/",
  "profiling": "timeline",
  "nativescript": {
    "id": "com.xx.enterprise.app",
    "tns-ios": {
      "version": "3.2.0"
    },
    "tns-android": {
      "version": "3.2.0"
    }
  },
  "scripts": {
    "lint": "tslint \"app/**/*.ts\"",
    "ns-bundle": "ns-bundle",
    "publish-ios-bundle": "npm run ns-bundle --ios --publish-app",
    "generate-android-snapshot": "generate-android-snapshot --targetArchs arm,arm64,ia32 --install",
    "start-android-bundle": "npm run ns-bundle --android --run-app",
    "start-ios-bundle": "npm run ns-bundle --ios --run-app",
    "build-android-bundle": "npm run ns-bundle --android --build-app",
    "build-ios-bundle": "npm run ns-bundle --ios --build-app"
  },
  "dependencies": {
    "@angular/animations": "4.4.3",
    "@angular/common": "4.4.3",
    "@angular/compiler": "4.4.3",
    "@angular/core": "4.4.3",
    "@angular/forms": "4.4.3",
    "@angular/http": "4.4.3",
    "@angular/platform-browser": "4.4.3",
    "@angular/router": "4.4.3",
    "base-64": "0.1.0",
    "moment": "2.18.1",
    "nativescript-android-utils": "1.0.2",
    "nativescript-angular": "4.2.0",
    "nativescript-checkbox": "2.1.14",
    "nativescript-dom": "2.0.0",
    "nativescript-local-notifications": "1.2.2",
    "nativescript-masked-text-field": "^1.0.2",
    "nativescript-pro-ui": "3.1.3",
    "nativescript-pulltorefresh": "2.0.2",
    "nativescript-theme-core": "1.0.4",
    "nativescript-toast": "1.4.6",
    "nativescript-websockets": "1.3.3",
    "nativescript-worker-loader": "0.8.1",
    "ng2-translate": "5.0.0",
    "reflect-metadata": "0.1.10",
    "rxjs": "5.4.3",
    "tns-core-modules": "3.2.0",
    "utf8": "2.1.2",
    "zone.js": "0.8.17"
  },
  "devDependencies": {
    "@angular/compiler-cli": "4.4.3",
    "@ngtools/webpack": "1.7.1",
    "babel-traverse": "6.26.0",
    "babel-types": "6.26.0",
    "babylon": "6.18.0",
    "codelyzer": "3.2.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-sass": "1.3.2",
    "nativescript-dev-typescript": "0.5.0",
    "nativescript-dev-webpack": "0.8.0",
    "nativescript-worker-loader": "0.8.1",
    "node-sass": "4.5.3",
    "raw-loader": "0.5.1",
    "resolve-url-loader": "2.1.0",
    "tslint": "5.7.0",
    "typescript": "2.5.2",
    "uglifyjs-webpack-plugin": "1.0.0-beta.2",
    "webpack": "3.6.0",
    "webpack-bundle-analyzer": "2.9.0",
    "webpack-sources": "1.0.1"
  }
}

[NickIliev]

@cmargulhano confirming this as a bug when using --uglify flag with the above dependency versions. Stay tuned for possible workarounds and information related to the fix.

[NickIliev]

@cmargulhano the issue you are experiencing seems to be related to "uglifyjs-webpack-plugin": "1.0.0-beta.2", usage. Try removing the experimental plugin and installing WebPack with the standard workflow

npm i nativescript-dev-webpack --save-dev
npm install
npm run start-android-bundle --uglify

Another thing I have noticed is that you are using "nativescript-angular": "4.2.0", while the Angular dependencies are 4.4.x which also might lead to undesired behavior (you should try to sync you Angular dependencies with the nativescript-angular version). To do that run 'npm install' and then navigate to node_modukles/nativescript-angular/bin and execute ./update-app-ng-deps (while using the latest 4.2.0 version of nativescript-angular for Angular 4.2.0 or next version for Angular 4.4.3)

[cmargulhano]

First of all, many thanks for your help.

I used uglifyjs-webpack-plugin": "1.0.0-beta.2" that was suggested in issue # 1011: https://github.com/NativeScript/nativescript-angular/issues/1011

I tried with standard work-flow but I'm getting this error right now:

ERROR in bundle.js from UglifyJs Unexpected token: name (window) [bundle.js:57389,4]

[gabitoesmiapodo]

Same problem as @cmargulhano ,

ERROR in bundle.js from UglifyJs
Unexpected token: (>)

fixed it as suggested on #1011, and now the app compiles with no errors or warnings, but it crashes on load.

With no --uglify parameter it works fine. The difference in size between the two compiled versions is around 1mb, so no big deal, but it's always better if we can get a smaller / faster loading app.

[Udobnaja]

I have the same problem as @cmargulhano.

I find not very good solution, but it's work. I start as @cmargulhano, i had plugin that not transpiling to es5 and uglify is failing to parse it. So i follow the https://github.com/NativeScript/nativescript-angular/issues/1011 solution from @sis0k0 but then i catch another error in runtime and crash. So i experimented with "mangle" in "uglifyOptions" from webpack.config.js

First you can just switch mangle option to false in webpack.config.js

plugins.push(new UglifyJSPlugin({
            uglifyOptions: {
                mangle: false,
            }
})

and require('nativescript-localstorage'); (require it in app.module.ts) and it should work

then i continued with experiments and got micro optimisation

i change my webpack.config.js ('localStorage' - the plugin that not transpiling, so i reserved it)

 if (env.uglify) {
        plugins.push(new webpack.LoaderOptionsPlugin({ minimize: true }));

        plugins.push(new UglifyJSPlugin({
            uglifyOptions: {
                mangle: {
                    eval: true,
                    reserved: [nsWebpack.uglifyMangleExcludes, 'localStorage'],
                    keep_fnames: true,
                },
                compress: true,
                output: {
                    comments: false,
                    beautify: false,
                }
            }
        }));
    }

and in my app.module.ts require('nativescript-localstorage');

It help's me avoid crash, maybe it helps you too.

[gabitoesmiapodo]

Thank you, that worked.