typescript - React Native-fel - Inga identifierare tillåtna direkt efter numeriskt litteral

Jag försöker använda en datafil som jag mappar över i en React Native-komponent men jag får följande fel:

Inga identifierare tillåtna direkt efter numeriskt värde.

./assets/data/players.js 5:11 Modulparsing misslyckades: Identifierare direkt efter nummer (5:11) Filen bearbetades med dessa laddare: "../../../../../../usr/local/lib/node_modules/expo-cli/node_modules/babel-loader/lib/index.js."

Du kan behöva en ytterligare laddare för att hantera resultatet av dessa laddare. namn: 'C.Ronaldo', match: 'BEL v POR', > pris: 12_200_000, position: 'FWD', totalaPoäng: 29.

Den markerar priset i data.js av någon anledning: > price: 12_200_000,

babel.config.js

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

spelare.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
  },
]

komponent jag använder för att mappa över datan och typerna fil:

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;

Svar #1

Din kod är inte giltig eftersom 12_200_000 inte är ett giltigt nummer och inte definierat någonstans. Så det måste vara en sträng och deklareras med '12_200_000' eller 1220000 som det verkliga numret.

Svar #2

Expo Babel-inställningen är föråldrad och tillåter dig inte att använda understreck som 12_200_000 även om de är helt giltiga. För att åtgärda, använd @babel/plugin-proposal-numeric-separator:

• Kör först yarn add -D @babel/plugin-proposal-numeric-separator för att lägga till pluginet. (Eller npm install -D @babel/plugin-proposal-numeric-separator.)
• Uppdatera sedan helt enkelt din babel.config.js för att använda den:

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ["@babel/plugin-proposal-numeric-separator"]
  };
};