ReferenceError: androidx is not defined

[seveneye]

Which platform(s) does your issue occur on?

• iOS/Android/Both - Android
• iOS/Android versions 5.1.0
• emulator or device. What type of device? Device

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

• CLI: (run tns --version to fetch it) 5.3.1
• Cross-platform modules: (check the 'version' attribute in the
  node_modules/tns-core-modules/package.json file in your project) 5.1.0
• Runtime(s): (look for the "tns-android" and "tns-ios" properties in the package.json file of your project) 5.1.0
• Plugin(s): (look for the version numbers in the package.json file of your
  project and paste your dependencies and devDependencies here)

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

Followed the steps, but got the error DatePickerField Error: ReferenceError: androidx is not defined. I'm not sure i have configured androidx. I am also using webpack.

[tgpetrov]

Hi @seveneye,

There is no need from any androidx configuration.

I was not able to reproduce the described issue. I successfully added the plugin to a new application and was also able to run the demo apps without any errors.

Can you describe how to reproduce the issue with more exact steps? Here are a few guidance questions:

• Are you trying to run some of the demo apps or you've added the plugin to another app ?
• Is the application Angular/Vue/TS/JS
• What is the command you are trying to run (is it tns run android --bundle ?)

[seveneye]

Im using this command to run the app tns run android --bundle --env.uglify --env.aot --env.snapshot.

The application is angular. I followed the steps as indicated.

1. tns plugin add nativescript-datetimepicker
2. add the module.
3. use in the template
4. error appears - ReferenceError: androidx is not defined

I tried using the lower version but I'm still getting the same error. I cleanup the node modules and platform folders before running the app.

Also, I am not able to run the angular demo. I am getting a lot of errors

> :app:processDebugResources:59:63 - error TS2304: Cannot find name 'CGRectZero'.

59         const pickerView = UIDatePicker.alloc().initWithFrame(CGRectZero);
                                                                 ~~~~~~~~~~

../src/datetimepicker.android.ts:9:63 - error TS2503: Cannot find namespace 'android'.

9     new(datePicker: any, dateTime: Date, callback: Function): android.content.DialogInterface.OnClickListener;
                                                                ~~~~~~~

../src/datetimepicker.android.ts:13:30 - error TS2503: Cannot find namespace 'android'.

13     new(callback: Function): android.content.DialogInterface.OnDismissListener;
                                ~~~~~~~

../src/datetimepicker.android.ts:28:36 - error TS2552: Cannot find name 'android'. Did you mean 'androidx'?

28         AppCompatNamespace = (<any>android.support).v7;
                                      ~~~~~~~

Are there any restriction in tns/tns-android/tns-core-modules version?

Any idea? Thanks.

[tgpetrov]

Hi @seveneye

I tried to follow the steps you provided:

1. I created a blank app with tns create my-blank-ng --template tns-template-blank-ng
2. I added the nativescript-datetimepicker with tns plugin add nativescript-datetimepicker
3. In app.module.ts I added the NativeScriptDateTimePickerModule to the list of imports
4. In home.component.html, added usage of the plugin <DatePickerField hint="select date"></DatePickerField>
5. Executed tns run android --bundle --env.uglify --env.aot --env.snapshot

Build failed with:

Cannot determine the module for class TextValueAccessor in .../my-blank-ng/node_modules/nativescript-angular/forms/value-accessors/text-value-accessor.d.ts! Add TextValueAccessor to the NgModule to fix it.

In order to resolve this I had to also add the NativeScriptFormsModule to the module imports alongside the NativeScriptDateTimePickerModule that I had already added (the NativeScriptFormsModule is imported with nativescript-angular/forms) in app.module.ts.

Then I was able to successfully run the application.

As to the demo app, in order to run the application, you can use one of the commands listed in the DevelopmentWorkflow article. In short, before executing a run command in one of the demo apps, you need to go the src directory and execute a npm run build. You other option is to just go to the src directory and execute a npm run demo.ng.android, which is a short syntax to run the plugin build and then run the demo ng app.

[seveneye]

@tgpetrov thank you for your response. Using the steps you provided, I was able to create a sample app and use the datepickerfield.

However, my real application still has the same error DatePickerField Error: ReferenceError: androidx is not defined and I have no clue about this error. I have tried using package.json from my real app to the sample app but I was not able to replicate this error.

Are there other things I need to look at like the reference.ts file or maybe the plugins? Can I debug the plugin?

[seveneye]

Tried to open datepicker using codebehind, but still the same error.

ReferenceError: androidx is not defined
JS:     at Function.n._createNativeDialog (file:///data/data/com.echopay.EchoMobile/files/app/vendor.js:1:1902687)
JS:     at file:///data/data/com.echopay.EchoMobile/files/app/vendor.js:1:1900274
JS:     at new e (file:///data/data/com.echopay.EchoMobile/files/app/vendor.js:1:1671106)
JS:     at Function.n.pickDate (file:///data/data/com.echopay.EchoMobile/files/app/vendor.js:1:1900074)
JS:     at t.onPickDateTap (file:///data/data/com.echopay.EchoMobile/files/app/bundle.js:1:13899)
JS:     at Object.handleEvent (file:///data/data/com.echopay.EchoMobile/files/app/bundle.js:1:18097)
JS:     at handleEvent (file:///data/data/com.echopay.EchoMobile/files/app/vendor.js:1:205065)
JS:     at lm (file:///data/data/com.echopay.EchoMobile/files/app/vendor.js:1:224576)
JS:     at Object.$y [as handleEvent] (file:///data/data/com.echopay.EchoMobile/files/app/vendor.js:1:220231)
JS:     at lh (file:///data/data/com.echopay.EchoMobile/files/app/v...

What are the possible reasons for androidx to be undefined?

[tgpetrov]

Hi @seveneye,

It would be great if you manage to determine the exact steps that need to be followed so that we can reproduce the issue, otherwise it would be hard for us to guess the reason. It may be related to some other plugin that you have in your app or there may be some artefacts that didn't get updated properly for some reason. If you haven't tried yet, you can remove from your project the node_modules, platforms and hooks directories as well as the webpack.config.js and package-lock.json files and try to run the application again.

I have just updated plugin and try to use "nativescript-datetimepicker": "^1.1.0" it was working fine when I was using v1.0.2 but, now when I try to select a date it gives an error in console like

JS: 'DatePickerField Error: ReferenceError: androidx is not defined'

I have tried after removing these node_modules, platforms and hooks directories as well but no luck

[tgpetrov]

Hi @ruchitaecor
We never managed to reproduce the issue.
Can you isolate the case and let us know the exact steps to reproduce it ?

@tgpetrov

Thanks for the quick response!!

As I said I was using v1.0.2 and its working fine in one of my ongoing project. I saw there is a new release 1.1.0 so I thought I should update the version as it's for Androidx support.

• I had changed the version in package.json to ^1.1.0 it was before ^1.0.2.
• remove node_modules, platforms and hooks directories as whenever I change package.json file I am doing this step.
• re-install packages using npm install
• tns prepare android --bundle as I am using Nativescript-vue
• tns debug android --bundle
• try to change date so its calling on @dateChange="function_name"
• after above step its printing simple console message JS: 'DatePickerField Error: ReferenceError: androidx is not defined' and not opening datepicker popup.

revert back to v1.0.2 and its working fine as before.

I am using the below versions and try to debug in android emulator.

Nativescript 5.3.4
Nativescript-Vue 2.2.2
tns-android version 5.3.1

[tgpetrov]

@seveneye, @ruchitaecor

I managed to reproduce a DatePickerField Error: ReferenceError: androidx is not defined only when I downgraded tns-android back to 4.2.0.

Can you confirm the version that you have in your projects for tns-android. The demo applications of the plugin, for example, are using 5.3.0 as visible from their package.json. If you have changed this version recently, don't forget to remove the content of the platforms directory, before running the app again.

If this is not the reason for the issue, please try to reproduce it in a blank app or in one of the demos, so we can reproduce it as well.

[seveneye]

@tgpetrov Im using tns-android 5.3.1. I already tried removing the node_modules and platforms folder but still has the same error.

Adding the plugin to a blank app works. Will post here when I have an exact repro steps.

[tgpetrov]

@seveneye , @ruchitaecor
Yesterday we released v.1.2.0, where the code around the androidx usage is refactored.
Can you try the new version and let me know if your issue is resolved?

@tgpetrov
Thanks for the new release. Yes, this version is working correctly.
Thank you once again!