Unexpected token in catch clause in React Native TypeScript

Despite having a fully configured React Native Typescript project that is functioning as expected, I have encountered a peculiar issue:

Within all of my catch blocks, due to the strict mode being enabled, typescript errors are appearing like this one: https://i.sstatic.net/rps3m.png

My first instinct was to simply add the any type to the error object.

https://i.sstatic.net/XXMJ9.png

After resolving the error, a problem arose with the RN bundler:

https://i.sstatic.net/So34D.png

I suspect that this issue stems from incorrect Typescript configuration settings, but I am unsure of where to begin troubleshooting. Any assistance would be greatly appreciated.

typescriptreact-nativemetro-bundler

Answer №1

UPDATE:

After updating some babel related packages, everything is finally working now! 😅

@babel/core: ^7.6.2t --> ^7.12.9
@babel/runtime: ^7.6.2 --> ^7.12.5
metro-react-native-babel-preset: ^0.58.0 --> ^0.66.0

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

Is anyone else experiencing issues with socket.io not functioning in production mode on IOS?

I am using socket.io for real-time alerts in my application. It is built with React Native and Expo. To incorporate the socket instance into necessary components, I have created a file called socketInstance.js: import io from 'socket.io-client'; ...

reactjsreact-nativesocket.io

What is preventing the spread type from being applied to `Record` in TypeScript?

export type AddResourceProps<K extends string, T extends any> = (resource: BasicResource) => Record<K, T> const addtionalResourse = addResourceProps ? addResourceProps(resource) : {} as Record<K,T> const result = { ...addtionalRe ...

reactjstypescriptredux

The immutability of the List in JavaScript and its

I am confused about how the size of an Immutable JS List grows. According to the official documentation example at https://facebook.github.io/immutable-js/docs/#/List/push, pushing something into an immutable js List should automatically increase its size ...

reactjstypescriptsizeimmutable.jsimmutablelist

Utilizing TypeScript namespaced classes as external modules in Node.js: A step-by-step guide

My current dilemma involves using namespaced TypeScript classes as external modules in Node.js. Many suggest that it simply can't be done and advise against using namespaces altogether. However, our extensive codebase is structured using namespaces, ...

javascriptnode.jstypescriptnamespacestypescript1.6

Utilizing Angular 10 to Transform a JSON Data into a Custom String for HTML Rendering

I have received a JSON response from my backend built using Spring Boot. The "category" field in the response can either be 1 or 2, where 1 represents Notifications and 2 represents FAQs. { "pageNumber": 0, "size": 5, "totalPages&q ...

javascripthtmlangulartypescriptngx-datatable

Drawer Slide issue persists post migration from LTR to RTL in React Native (iOS)

I recently encountered an issue in my React Native app where I needed to switch the layout direction from LTR to RTL when the Arabic language is chosen. To achieve this, I used the following code: I18nManager.forceRTL(true); RNRestart.Restart(); However, ...

iosreact-nativenavigation-drawerarabic-support

Is it secure to use ES6 in Typescript with nodejs/koa?

As I transition to using TypeScript in a Node.js/koa project, I came across the need to modify the .tsconfig file to target ES6. Otherwise, an error message will appear stating: Generators are only available when targeting ECMAScript 6 or higher. // index ...

javascriptnode.jstypescript

Ways to determine if a specified character sequence is present in an Enumerator?

One of my coding dilemmas involves an enum that looks like this: export enum someEnum { None = <any>'', value1 = <any>'value1', value2 = <any>'value2', value3 = <any>'value3' ...

typescriptenums

Guide on showcasing the parameter passed in a TypeScript file on an HTML page

Just starting out with the Ionic framework and I'm attempting to show the parameter passed from the home page on my new page. I've gone through the code below but so far, nothing is showing up. Any ideas on what might be missing? Thanks in advan ...

angulartypescriptionic2

What prevents TypeScript from automatically inferring tuple return types in RxJs streams?

When composing an observable stream, the map function infer is a union instead of a tuple. For instance: import { Component } from '@angular/core'; import { from } from 'rxjs'; import { map, tap } from 'rxjs/operators'; expo ...

angulartypescriptgenericstypesrxjs

Issue with React-Toastify not displaying on the screen

After updating from React-Toastify version 7.0.3 to 9.0.3, I encountered an issue where notifications are not rendering at all. Here are the steps I followed: yarn add [email protected] Modified Notification file import React from "react" ...

javascriptreactjstypescriptreact-toastify

I need to retrieve the Home Page data in React Native based on the email address of the logged-in user

After logging into my project with an email and password, I need to fetch Home Page data based on the logged-in email. The API will provide response data specific to that user. In useState(), I have set a static email which needs to be changed dynamicall ...

expressreact-native

Learn how to efficiently disable or enable a button in Angular depending on the selected radio button

In order to disable the button when the remarks are marked as failed. Here is an example scenario: Imagine there is an array containing two to four items. First example: ITEM 1 -> FAILED -> Remarks (required) ITEM 2 -> FAILED -> Remarks (r ...

javascriptangulartypescript

Transforming API data into a particular type using Typescript

I am looking to extract only specific properties from a given object. Can TypeScript interfaces be used to iterate through the data and eliminate unnecessary properties? Sample data: [ 0: { "original_language" : "en", "t ...

javascripttypescript

How should the superclass constructor of `MatDialog` be invoked when working with multiple classes?

When dealing with multiple features in my ts file, I decided to split them into separate classes. constructor( ) { super(MatDialog); } Encountered error: Argument of type 'typeof MatDialog' is not assig ...

angulartypescriptecmascript-6

Tips for retrieving items from <ng-template>:

When the loader is set to false, I am trying to access an element by ID that is located inside the <ng-template>. In the subscribe function, after the loader changes to false and my content is rendered, I attempt to access the 'gif-html' el ...

javascriptangulartypescript

Is there a way to trigger a request to the backend when the user closes or refreshes the browser?

My Objective: I am working on a lobby feature that updates automatically when a player leaves. Using backend requests and sockets, the lobby is updated to display the current list of players after someone exits. The Challenge: I am faced with the issue ...

angulartypescriptweb-applicationsonbeforeunloadondestroy

Change a TypeScript alias within the @types namespace

While using Typescript 3, I encountered a situation where I needed to modify a type alias from the @types/json-schema definition provided by DefinitelyTyped. The issue arose when I wanted to incorporate a custom schema type into my code. Since this custom ...

javascriptnode.jstypescript

Having trouble accessing a JSON object with Typescript in an Angular 2 project

Something strange is happening with my code. I am working with a JSON object: {"login":"admin","name":"Admin"} And this is the relevant part of my code: private _userData: User; ... private getUserData() { this._userInfoService.getUserInfo() ...

javascriptjsontypescriptangular

Creating objects based on interfaces in TypeScript is a common practice. This process involves defining

Within my TypeScript code, I have the following interface: export interface Defined { 4475355962119: number[]; 4475355962674: number[]; } I am trying to create objects based on this interface Defined: let defined = new Defined(); defined['447 ...

javascripttypescripttypescript2.0