Nativescript encountered an error due to an undefined variable called FIRAuth

I'm currently working on a project using Nativescript.

While everything runs smoothly with Firebase on the local emulator, I encounter errors when testing the application on my iPhone. The specific error message is:

CONSOLE LOG file:///app/vendor.js:2172:24: Error in firebase.login: ReferenceError: Can't find variable: FIRAuth

I suspected it might be related to where I initialized Firebase, so I moved firebase.init() from app.models.ts to the initial view based on suggestions from other forum posts.

The discrepancy between emulator and device performance has left me puzzled.

If anyone can offer some insight, that would be greatly appreciated.

Environment:
    Device: iPhone SE,
    Framework: Nativescript (Angular)
    Dependencies: Firebase, nativescript-plugin-firebase

If more information is needed, feel free to ask.

GoogleService-info.plist

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>CLIENT_ID</key>
    <string>xxxxxxxxx.apps.googleusercontent.com</string>
   // Other key-value pairs here...
</dict>
</plist>

firebase.nativescript.json

{
    "external_push_client_only": false,
    // Other configuration settings listed here...
}

Answer №1

If you are using the nativescript-plugin-firebase, it seems that you cannot preview on an actual device.

You may encounter the following error message:-

Plugin nativescript-plugin-firebase is not included in preview app on device 3CDExxxx-xxxx-xxxx-xxxx-960121C3xxxx and will not work.

Your application will still run, but Firebase modules will not be accessible.

This information might be helpful for others experiencing the same issue.

If anyone has found a workaround to test without purchasing an Apple license, please share in the comments.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Compiling Typescript tasks in Visual Studio Code - ensuring output encoding is set correctly

Have you tried manually setting up a typescript compilation task in Visual Studio Code? You can find detailed instructions at this link. When you run the build command (Ctrl+Shift+B), are you seeing an error message from tsc with unknown encoding? Check o ...

The potential object null may lead to an absence of the 'value' property in the type 'EventTarget'

I am facing a problem that I am unable to resolve. The error in my HTML reads: Object is possibly 'null' and Property 'value' does not exist on type 'EventTarget'. HTML <select [(ngModel)]="selectedProvincia" (ch ...

Eliminate duplicate dropdown options in Angular 2 using a filter function

Is there a way to filter reporting results in an Angular 2 dropdown list? I am currently attempting to do so within the *ngFor template but haven't had any success. I will also try using a custom pipe. The data is coming from a JSON array. Specificall ...

Implementation of a function in Typescript that can be defined with a

I am currently diving into the Typescript specification and I'm facing a challenge in creating a functional implementation for describable functions. https://www.typescriptlang.org/docs/handbook/2/functions.html The provided example lacks completene ...

Populate List Items until Maximum Capacity is Reached and Increase the

Is there a way to make a ListItem fill the list vertically while also being able to overflow it if needed? I'm looking for a solution that would allow me to access the height of the empty space in the list, which I believe would be the minHeight. Som ...

Enhance your map by incorporating an overlay with ngx-openlayers

Currently, I am trying to implement zoom-in and zoom-out buttons on an OpenLayers map. I attempted to use the overlay method but encountered an error. Here is the code snippet for reference: zoom_button = document.getElementById('zoom') zo ...

What causes the form to consistently show as invalid once it has been submitted?

register.html : <form [formGroup]="signupForm" (submit)="onSubmit()" class="form-detail"> <h2>Registration Form</h2> <div class="form-row-total"> <div class="form-row"> <in ...

Display the map using the fancybox feature

I have added fancybox to my view. When I try to open it, I want to display a map on it. Below is the div for fancybox: <div id="markers_map" style="display:none"> <div id="map_screen"> <div class="clear"></div> </div&g ...

Leveraging multiple routes for a single component in Angular 6

Creating a component named Dashboard for admin requires passing the username in the route to find user information. This is the routing setup: {path:'dashboard/:username',component:DashboardComponent,children:[ {path:'role',component: ...

Dialog component from HeadlessUI doesn't support the Transition feature

Currently working with Next.JS version 14.1.3 I recently integrated the <Dialog> component from HeadlessUI and configured TailwindCSS. However, I encountered an issue where the Modal window doesn't have any transition effects even though I foll ...

When using Swift 2.1 Core Data, pre-populating data with the setValue() method will only persist the last value set

Currently, I am developing an application that involves a Category entity requiring four default records to be pre-loaded upon launching. While considering bundling my app with an sqlite or csv file for data preloading, I opted to inject the default value ...

Verify if the UIButton has been clicked

I am facing an issue with four UI buttons where I want different actions to happen depending on which button the user presses. I attempted using a boolean variable to determine if a button is clicked, but it doesn't seem to work as expected. The code ...

The inclusion of individual CSS files in a TypeScript React project does not have any effect

My issue involves creating a new react project with typescript and adding a custom component with a separate CSS file for styling. The folder structure is as follows: In the Header.css file, I have defined a class: .mainHeading { color: green; } The ...

Nest JS Guards - Employ either of two approaches

I have implemented two different JWT based strategies in my application: The first strategy involves single sign-on for organization members, where an external provider generates a JWT. The second strategy is for email/password authenticated external user ...

The issue with angular JavaScript in the child component is causing the left side navigation dropdown to malfunction

I'm currently facing an issue with the left side navigation in my home component. The dropdown functionality is not working within one of the routing modules (admin-routing.module.ts). Interestingly, the navigation works perfectly fine in app-routing. ...

iOS exhibits a flashy display of Material Select lighting up

In my attempt to develop a website using Material Design, I encountered an issue with the Material Select component. Whether I utilize MDB (Material Design for Bootstrap) or the Materialize CSS framework, both function well on Windows/OSX/Android devices. ...

Include a conditional statement in ng keypress

When a user types a specific value into a text input, I want to display a specific div. This is what my template looks like: <input type="text" id="jobTitle" (click)="autoCompleteClick()" (keypress)="autoCompleteKeypress()" name="autocomplete" place ...

Converting a dynamic JSON object into a generic type in TypeScript

I need assistance with converting a JSON object into the equivalent generic type in TypeScript. The JSON object I have contains dynamic keys such as applications and permissions. The keys inside applications, like application_management and user_managemen ...

merging JavaScript objects with complex conditions

I am attempting to combine data from two http requests into a single object based on specific conditions. Take a look at the following objects: vehicles: [ { vId: 1, color: 'green', passengers: [ { name: 'Joe', ag ...

Is there a way to eliminate the annoying white screen bounce on iPhone/iOS that occurs when utilizing the Cordova InAppBrowser?

Seeking assistance with a problem that is causing the Cordova-InAppBrowser to display a white screen bounce on every page. Any advice or solutions would be greatly appreciated. ...