I am trying to use a data file which I am mapping over in a React Native component but I am getting the following error:
No identifiers allowed directly after numeric literal.
./assets/data/players.js 5:11Module parse failed: Identifier directly after number (5:11)File was processed with these loaders:"../../../../../../usr/local/lib/node_modules/expo-cli/node_modules/babel-loader/lib/index.js.
You may need an additional loader to handle the result of these loaders.name: 'C.Ronaldo',match: 'BEL v POR', > price: 12_200_000, position: 'FWD', totalPoints: 29.
It it highlighting the price in data.js for some reason: > 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 }, { id: '2', name: 'G. Wijnaldum', match: 'NED v CZE', price: 8_100_000, position: 'MID', totalPoints: 23 }, { id: '3', name: 'E. Forsberg', match: 'SWE v UKR', price: 7_700_000, position: 'MID', totalPoints: 23 }, { id: '4', name: 'D. Dumfries', match: 'NED v CZE', price: 5_600_000, position: 'DEF', totalPoints: 22 }, { id: '5', name: 'P. Schick', match: 'NED v CZE', price: 8_400_000, position: 'FWD', totalPoints: 21 }, { id: '6', name: 'X. Shaqiri', match: 'FRA v SUI', price: 7_200_000, position: 'MID', totalPoints: 21 }, { id: '7', name: 'M. Depay', match: 'NED v CZE', price: 10_100_000, position: 'FWD', totalPoints: 20 }, { id: '8', name: 'C. Ronaldo', match: 'BEL v POR', price: 12_200_000, position: 'FWD', totalPoints: 29 }, { id: '9', name: 'G. Wijnaldum', match: 'NED v CZE', price: 8_100_000, position: 'MID', totalPoints: 23 }, { id: '10', name: 'E. Forsberg', match: 'SWE v UKR', price: 7_700_000, position: 'MID', totalPoints: 23 }, { id: '11', name: 'D. Dumfries', match: 'NED v CZE', price: 5_600_000, position: 'DEF', totalPoints: 22 }, { id: '12', name: 'P. Schick', match: 'NED v CZE', price: 8_400_000, position: 'FWD', totalPoints: 21 }, { id: '13', name: 'X. Shaqiri', match: 'FRA v SUI', price: 7_200_000, position: 'MID', totalPoints: 21 }, { id: '14', name: 'M. Depay', match: 'NED v CZE', price: 10_100_000, position: 'FWD', totalPoints: 20 },]component I'm using to map 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";import { View, Text, Image, StyleSheet } from "react-native";import { Player } from "../types";interface Props { player: Player;}const PlayerListItem = ({ player }: Props) => { return (<View style={styles.container}><Image style={styles.image} /><View style={{ flexGrow: 1 }}><Text style={styles.name}>{player.name}</Text><Text>{player.match}</Text></View><View style={[styles.colContainer, { alignItems: "flex-end" }]}><Text style={styles.name}>${player.price}</Text><Text>{player.position}</Text></View><View><Text style={styles.points}>{player.totalPoints}</Text></View></View> );};const styles = StyleSheet.create({ container: { flexDirection: "row", width: "100%", justifyContent: "space-between", padding: 10, alignItems: "center", borderBottomWidth: 1, borderColor: "#eee", }, colContainer: { marginHorizontal: 15, }, image: {}, name: { fontWeight: "bold", }, points: { fontWeight: "bold", fontSize: 18, },});export default PlayerListItem;