React Native error - Numeric literals cannot be followed by identifiers directly

I encountered an issue while utilizing a data file for mapping over in a React Native component. The error message displayed is as follows:

The error states: "No identifiers allowed directly after numeric literal."

File processed with loaders: "../../../../../../usr/local/lib/node_modules/expo-cli/node_modules/babel-loader/lib/index.js.

An additional loader may be required to handle the output of these loaders. name: 'C.Ronaldo', match: 'BEL v POR', > price: 12_200_000, position: 'FWD', totalPoints: 29.

Interestingly, it's highlighting the price in data.js: > price: 12_200_000,

babel.config.js

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo']
  };
};

players.js

export const players = [
  {
    id: '1',
    name: 'C. Ronaldo',
    match: 'BEL v POR',
    price: 12_200_000,
    position: 'FWD',
    totalPoints: 29
  },
  ...
  

component I am using to iterate over the data and types file:


enum Positions {
  FWD,
  MID,
  DEF,
  GK,
}

export type Player = {
  id: string;
  name: string;
  match: string;
  price: number;
  position: Positions;
  totalPoints: number;
};

import React from "react";
...

Answer №1

The code provided is invalid because 12_200_000 is not recognized as a valid number in any programming language. To make it recognizable, you must declare it as either a string using quotes like '12_200_000' or as a real number without underscores like 1220000.

Answer №2

The current version of the Expo Babel preset does not support the use of underscores in numbers, such as 12_200_000, even though they are considered valid. To resolve this issue, you can install and use the

@babel/plugin-proposal-numeric-separator
plugin:

  • Start by running
    yarn add -D @babel/plugin-proposal-numeric-separator
    to add the plugin to your project. (Alternatively, use
    npm install -D @babel/plugin-proposal-numeric-separator
    .)
  • Next, update your babel.config.js file to incorporate the plugin:
module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ["@babel/plugin-proposal-numeric-separator"]
  };
};

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

What is the process of extending a class in TypeScript?

I have a few services that contain the same code: constructor (private http: Http) { //use XHR object let _build = (<any> http)._backend._browserXHR.build; (<any> http)._backend._browserXHR.build = () => { let _xhr = _ ...

Encountering the following error message: "E11000 duplicate key error collection"

Currently, I am in the process of developing an ecommerce platform using the MERN stack combined with TypeScript. As part of this project, I am working on a feature that allows users to provide reviews for products. The goal is to limit each user to only o ...

I am currently in the process of creating an application that utilizes two types of users - an admin and a client. However, I am experiencing difficulties with the login functionality for both users. The application is being developed using React Native

I am facing difficulty in showing different screens based on the login users as I cannot seem to login successfully for either user. Here is the code snippet for my login screen: const SignIn = ({ navigation }) => { const [user, setUser] = useState(n ...

Sending JSON object data to an API endpoint using the POST method in an Angular application

Attempted to post data to an API, but received a 400 bad request error. After testing with Postman, it seems that the issue may lie within my service or TypeScript code. As a newcomer to Angular, I am seeking assistance as I have searched extensively witho ...

Resolving "SyntaxError: Unexpected identifier" when using Enzyme with configurations in jest.setup.js

I'm currently facing an issue while trying to create tests in Typescript using Jest and Enzyme. The problem arises with a SyntaxError being thrown: FAIL src/_components/Button/__tests__/Button.spec.tsx ● Test suite failed to run /Users/mika ...

Is it possible for a typed function to access object properties recursively?

Is there an efficient method in TypeScript to type a function that can recursively access object properties? The provided example delves two levels deep: function fetchNestedProperty<T, K extends keyof T>(obj: T, prop1: K, prop2: keyof T[K]) { r ...

Implement two useState hooks in React, where the value of one depends on the value of

Utilizing two useState hooks, one for object A to initialize object B, is my current approach. However, I am encountering an issue where my render function detects an empty B array, resulting in a brief white screen display. Removing the initialization on ...

Having trouble with the lodash find function in my Angular application

npm install lodash npm install @types/lodash ng serve import { find, upperCase } from 'lodash'; console.log(upperCase('test')); // 'TEST' console.log(find(items, ['id', id])) // TypeError: "Object(...)(...) is un ...

Oops! The program encountered an issue where it couldn't access the "Point" property because it was undefined. This occurred while working with openlayers 3 and jsts on

I am currently working on implementing a buffer function for some features that have been drawn on a map following this particular example. However, I am encountering the following error: ERROR TypeError: Cannot read property 'Point' of undefin ...

Encountering a SyntaxError while utilizing framer-motion in Next JS

Currently, I am working with NextJS version 12.0.3 and integrating framer motion for animations into my project. However, regardless of the framer-motion library's capabilities, whenever I add a tag to any HTML element in my component, an error is tri ...

Using methods from one component in another with NgModules

There are two modules in my project, a root module and a shared module. Below is the code for the shared module: import { NgModule } from '@angular/core'; import { SomeComponent } from "./somecomponent"; @NgModule({ declarations: [SomeCompon ...

Can you explain the significance of this code snippet 'true <=> false'?

Today I came across this piece of code: true <=> false. I'm a bit confused by it and don't really understand how it works. If anyone could shed some light on this expression for me, I would greatly appreciate it. For reference, this code ...

What is the best way to encapsulate a class with generic type methods within a class that also has a generic type, but without any generic type arguments on its methods?

Below is an example of the code I am working with: class Stupid { private cache: Map<any, any> = new Map(); get<T>(key: string): T { return this.cache.get(key); }; } class Smart<T> extends Stupid { get(key: string): T { s ...

Tailwind - Error: the function is undefined

Just beginning my journey with React Native and facing this error. Screenshot of IOS App emulator Screenshot of Terminal import React from "react"; import { StyleSheet, Text, View } from 'react-native'; import tw from "tailwind-rn& ...

Using TypeScript's `extend` keyword triggers an ESLint error when attempting to extend a generic type

I am dealing with numerous models that include additional meta data, which led me to create a generic type for appending them to the models when necessary: type WithMeta<T> = T extends Meta; However, I encountered an error stating: Parsing error: &a ...

What is the best way to show/hide group items in a PrimeNG dropdown menu?

Is it possible to show or hide group items when clicking on the group header if the group contains items? For instance, I would like to display 3 items (AA, BB, CC) in a dropdown menu. The first 2 options (AA and BB) should be selectable, but when I click ...

lines stay unbroken in angular

I am encountering an issue when I execute the following code: DetailDisplayer(row) : String { let resultAsString = ""; console.log(row.metadata.questions.length); (row.metadata.questions.length != 0 )?resultAsString += "Questions ...

Guide to making a Typescript type guard for a ReactElement type

I'm currently working with three TypeScript type guards: const verifyTeaserOne = (teaser: Teaser): teaser is TeaserOneType => typeof teaser === 'object' && teaser.type.includes('One'); const validateTeaserTwo = ( ...

Ensure that react-native-google-places-autocomplete is assigned a specific value rather than relying on the default value

I am currently using a functional <TextInput>: <TextInput placeholder="Location" value={props.locationInput.toString()} onChangeText={location => props.updateLocationInput(location)} /> Initially, the props.locationIn ...

Error encountered during Typescript compilation: Type 'void' cannot be assigned to type 'Item[]'

Below are my typescript functions. When I edit in vscode, the second function does not show any error message. However, upon compilation, an error is displayed for the second function: error TS2322: Type 'Promise<void>' is not assignable t ...