RE: imagepicker is not defined

[samliaw]

I have the nativescript-imagepicker installed few months and it is always working fine. However, when I test it today, i encounter intermediate issue.

JS: ERROR ReferenceError: imagepicker is not defined
JS: ERROR CONTEXT [object Object]

I am using Visaul Studio Code and I import the nativescript-imagepicker as follow import * as imagepicker from "nativescript-imagepicker"; It doesn't provide any error message or it doesn't say the file is not found. I have also double confirmed that nativescript-imagepicker does exist under node_modules folder.

I try to uninstall and reinstall nativescript-imagepicker and also issue the command "rm -rf node_modules platforms". These helps for the first time when i start the application. I notice if theimagepicker is available, I will be able to see the following messages in console

ActivityManager: START u0 {act=android.content.pm.action.REQUEST_PERMISSIONS pkg=com.google.android.packageinstaller cmp=com.google.android.packageinstaller/com.android.packageinstaller.permission.ui.GrantPermissionsActivity (has extras)} from uid 10305 and from pid 17350 on display 0
ActivityManager: START u0 {act=android.intent.action.GET_CONTENT typ=image/* cmp=com.android.documentsui/.DocumentsActivity (has extras)} from uid 10305 and from pid 17350 on display 0

After I make changes to my code and rebuild using command "tns run android", I will see the following error

JS: ERROR ReferenceError: imagepicker is not defined
JS: ERROR CONTEXT [object Object]

I have also install nativescript-ui-core since it is one of the dependencies. I am very sure all the 3 dependencies are installed. Below is my package.json file

{
  "name": "ema",
  "version": "1.0.0",
  "description": "NativeScript Application",
  "license": "SEE LICENSE IN <your-license-filename>",
  "readme": "NativeScript Application",
  "repository": "<fill-your-repository-here>",
  "nativescript": {
    "id": "org.nativescript.EMA",
    "tns-ios": {
      "version": "3.3.0"
    },
    "tns-android": {
      "version": "3.4.2"
    }
  },
  "dependencies": {
    "@angular/animations": "^5.2.2",
    "@angular/common": "^5.2.2",
    "@angular/compiler": "^5.2.2",
    "@angular/core": "^5.2.2",
    "@angular/forms": "^5.2.2",
    "@angular/http": "^5.2.2",
    "@angular/platform-browser": "^5.2.2",
    "@angular/platform-browser-dynamic": "^5.2.2",
    "@angular/router": "^5.2.2",
    "@ngrx/effects": "^5.0.1",
    "@ngrx/store": "^5.0.0",
    "buffer": "^5.1.0",
    "nativescript-angular": "^5.2.0",
    "nativescript-background-http": "^3.1.0",
    "nativescript-camera": "^3.2.1",
    "nativescript-facebook": "^2.0.1",
    "nativescript-feedback": "^1.1.1",
    "nativescript-image-swipe": "^2.1.0",
    "nativescript-imagepicker": "^5.0.2",
    "nativescript-loading-indicator": "^2.4.0",
    "nativescript-ngx-fonticon": "^4.0.0",
    "nativescript-permissions": "^1.2.3",
    "nativescript-theme-core": "~1.0.2",
    "nativescript-ui-core": "^1.0.0",
    "nativescript-ui-listview": "^3.5.0",
    "nativescript-ui-sidedrawer": "^3.5.0",
    "ramda": "^0.24.1",
    "reflect-metadata": "~0.1.8",
    "rxjs": "^5.5.6",
    "tns-core-modules": "^3.4.1",
    "zone.js": "^0.8.18"
  },
  "devDependencies": {
    "@angular/compiler-cli": "^5.2.2",
    "@ngtools/webpack": "~1.9.1",
    "babel-traverse": "6.26.0",
    "babel-types": "6.26.0",
    "babylon": "6.18.0",
    "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",
    "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"
  }
}

I run out of ideas on how to troubleshoot this issue. Any thing I need to look at?

[tsonevn]

Hi @samliaw, Can you check if you will have the same issue, while using the latest nativescript-imagepicker 6.0.3, NativeScript 4.2 and nativescript-angular 6.1? Bear in mind that you need to update the version of all angular dependencies as well. I am attaching sample package.json

{
    "description": "NativeScript Application",
    "license": "SEE LICENSE IN <your-license-filename>",
    "readme": "NativeScript Application",
    "repository": "<fill-your-repository-here>",
    "nativescript": {
        "id": "org.nativescript.blankng",
        "tns-android": {
            "version": "4.2.0"
        },
        "tns-ios": {
            "version": "4.2.0"
        }
    },
    "dependencies": {
        "@angular/animations": "6.1.1",
        "@angular/common": "6.1.1",
        "@angular/compiler": "6.1.1",
        "@angular/core": "6.1.1",
        "@angular/forms": "6.1.1",
        "@angular/http": "6.1.1",
        "@angular/platform-browser": "6.1.1",
        "@angular/platform-browser-dynamic": "6.1.1",
        "@angular/router": "6.1.1",
        "kinvey-nativescript-sdk": "3.11.6",
        "nativescript-accelerometer": "2.0.1",
        "nativescript-angular": "6.1.0", 
        "nativescript-intl": "3.0.0",
        "nativescript-theme-core": "1.0.4",
        "nativescript-imagepicker": "^6.0.3",
        "reflect-metadata": "0.1.12",
        "rxjs": "6.2.2",
        "tns-core-modules": "4.2.0",
        "zone.js": "0.8.26"
    },
    "devDependencies": {
        "babel-traverse": "6.26.0",
        "babel-types": "6.26.0",
        "babylon": "6.18.0",
        "lazy": "1.0.11",
        "nativescript-dev-typescript": "0.7.2",
        "tns-platform-declarations": "4.2.0",
        "typescript": "~2.7.2"
    }
}

If the problem persists, please send us a sample project, which can be used for debugging.