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:11 Module 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;

CodePudding user response：

Your code is not valid because 12_200_000 is not a valid number and not defined anywhere. So it needs to be a string and declared with '12_200_000' or 1220000 as the real number.