Webpack Compatibility

[Ericky14]

This plugin doesn't seem to be compatible with nativescript-dev-webpack.

I get errors such as

unexpected token (contacts) =>

I researched and found out that nativescript-dev-webpack does not support es6 features, but I was not able to find a work around for this. Is there any way to use babel maybe or something to compile this plugin's code first? Or maybe the plugin can be updated to compile to es5?

[abhayastudios]

Hi @Ericky14!

I just successfully created & ran a webpack build according to the nativescript-dev-webpack installation instructions in the (clean) demo-angular dir of this project as follows:

$ npm install --save-dev nativescript-dev-webpack
$ npm install

$ npm run start-ios-bundle

In addition, I webpack bundle my own apps that use this plugin and they work just fine. Do you have a project repo that I can look at?

I may be worthwhile to compare your project's tsconfig.json to the one of the demo-angular project in this plugin. As you can see the tsconfig.json of the demo-angular project has a "target": "es5" entry which should compile everything to es5.

Are you using Typescript for your project? Also, are you using the plain or Angular version of Nativescript?

[Ericky14]

Hmm, I don't have a demo repo setup right now. I do use angular. Here is my tsconfig.json

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true,
        "noEmitHelpers": true,
        "noEmitOnError": true,
        "lib": [
            "es6",
            "dom",
            "es2015.iterable"
        ],
        "baseUrl": ".",
        "paths": {
            "*": [
                "./node_modules/tns-core-modules/*",
                "./node_modules/*"
            ]
        }
    },
    "include": [
        "**/*"
    ],
    "exclude": [
        "node_modules",
        "platforms",
        "**/*.aot.ts"
    ],
    "files": [
        "node_modules/tns-core-modules/tns-core-modules.d.ts",
        "node_modules/tns-platform-declarations/android/android17.d.ts"
    ]
}

I guess it could be because of my dependencies too, but I am not sure. I will test more next week, right now I don't have time. This is the error I get

ERROR in 59d64e7a525b262e3f0e.worker.js from UglifyJs
    Unexpected token: name (contacts) [59d64e7a525b262e3f0e.worker.js:16443,4]

And here's my package.json if you wanna take a look at it

"dependencies": {
    "@angular/animations": "~4.2.5",
    "@angular/common": "~4.2.5",
    "@angular/compiler": "~4.2.5",
    "@angular/core": "~4.2.5",
    "@angular/forms": "~4.2.5",
    "@angular/http": "~4.2.5",
    "@angular/platform-browser": "~4.2.5",
    "@angular/platform-browser-dynamic": "~4.2.5",
    "@angular/router": "~4.2.5",
    "@angular/tsc-wrapped": "~4.2.5",
    "email-validator": "1.0.7",
    "lodash": "4.17.4",
    "moment": "2.18.1",
    "nativescript-angular": "4.2.0",
    "nativescript-background-http": "3.1.0",
    "nativescript-barcodescanner": "2.7.0",
    "nativescript-bitmap-factory": "1.7.1",
    "nativescript-camera": "3.1.2",
    "nativescript-checkbox": "3.0.1",
    "nativescript-clipboard": "1.1.6",
    "nativescript-contacts-lite": "^0.2.4",
    "nativescript-doorbell.io": "0.0.1",
    "nativescript-email": "1.5.1",
    "nativescript-fabric": "1.0.5",
    "nativescript-fancyalert": "1.1.2",
    "nativescript-geolocation": "3.0.0",
    "nativescript-gradient": "2.0.0",
    "nativescript-imagecropper": "0.1.2",
    "nativescript-imagepicker": "4.0.1",
    "nativescript-iqkeyboardmanager": "1.0.1",
    "nativescript-local-notifications": "1.2.1",
    "nativescript-ngx-fonticon": "2.2.0",
    "nativescript-oauth-fix": "2.0.1",
    "nativescript-permissions": "1.2.3",
    "nativescript-phone": "1.3.0",
    "nativescript-printer": "1.2.0",
    "nativescript-pro-ui": "3.2.0",
    "nativescript-signalr": "file:nativescript-signalr-1.0.0.tgz",
    "nativescript-social-share": "1.3.2",
    "nativescript-timedatepicker": "^1.2.1",
    "nativescript-unit-test-runner": "0.3.3",
    "reflect-metadata": "0.1.8",
    "rxjs": "^5.0.1",
    "tns-core-modules": "3.3.0",
    "tns-platform-declarations": "3.3.0",
    "uniq": "1.0.1",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@angular/compiler-cli": "~4.2.5",
    "@ngtools/webpack": "^1.8.0",
    "@types/chai": "4.0.2",
    "@types/mocha": "2.2.41",
    "@types/node": "7.0.5",
    "babel-traverse": "6.26.0",
    "babel-types": "6.26.0",
    "babylon": "6.17.0",
    "chai": "4.1.1",
    "chai-as-promised": "7.1.1",
    "codelyzer": "3.0.1",
    "copy-webpack-plugin": "4.0.1",
    "extract-text-webpack-plugin": "3.0.2",
    "filewalker": "0.1.3",
    "jasmine-core": "2.6.1",
    "karma": "1.7.0",
    "karma-jasmine": "1.0.2",
    "karma-nativescript-launcher": "0.4.0",
    "lazy": "1.0.11",
    "mocha": "3.5.0",
    "mocha-junit-reporter": "1.13.0",
    "mocha-multi": "0.11.0",
    "nativescript-css-loader": "~0.26.0",
    "nativescript-dev-appium": "3.0.0",
    "nativescript-dev-typescript": "0.5.1",
    "nativescript-dev-webpack": "^0.8.0",
    "nativescript-worker-loader": "^0.8.1",
    "raw-loader": "~0.5.1",
    "resolve-url-loader": "~2.1.0",
    "tslib": "1.7.1",
    "tslint": "5.2.0",
    "typescript": "2.3.4",
    "uglifyjs-webpack-plugin": "^1.0.1",
    "webpack": "3.1.0",
    "webpack-bundle-analyzer": "2.9.0",
    "webpack-sources": "1.0.2",
    "worker-loader": "^1.1.0"
  }

[abhayastudios]

What happens when you try to webpack build this project's demo-angular project?

Anyway I am not familiar with most of the dependencies in your project. There I think it would be best to try and isolate the problem by building a minimal project with this plugin and see what happens.

Alternatively, you could this this suggestion to upgrade Uglify to the latest so it will support ES6.

[Ericky14]

Ah, apparently it was an error on my part. I had webpack previously installed, so I had older versions of webpack.androd.js, webpack.ios.js, and webpack.common.js.

After deleting those files and re-installing nativescript-dev-webpack, it worked.

Thank you for your time.