Estoy usando una biblioteca que tiene colores definidos de esta manera: 500_. Cada mención de esto dentro del código de la biblioteca genera un error de sintaxis.
Funciona bien en la computadora de mi amigo, ¿cómo soluciono esto?
Paleta.js:
import { alpha } from '@material-ui/core/styles'; function createGradient(color1, color2) { return `linear-gradient(to bottom, ${color1}, ${color2})`; } // SETUP COLORS const GREY = { 0: '#FFFFFF', 100: '#F9FAFB', 200: '#F4F6F8', 300: '#DFE3E8', 400: '#C4CDD5', 500: '#919EAB', 600: '#637381', 700: '#454F5B', 800: '#212B36', 900: '#161C24', 500_8: alpha('#919EAB', 0.08), 500_12: alpha('#919EAB', 0.12), 500_16: alpha('#919EAB', 0.16), 500_24: alpha('#919EAB', 0.24), 500_32: alpha('#919EAB', 0.32), 500_48: alpha('#919EAB', 0.48), 500_56: alpha('#919EAB', 0.56), 500_80: alpha('#919EAB', 0.8) };Error:
Failed to compile. ./src/theme/overrides/Input.js Syntax error: Identifier directly after number (24:53) 22 | underline: { 23 | '&:before': { > 24 | borderBottomColor: theme.palette.grey[500_56] | ^ 25 | } 26 | } 27 | }Error:
Failed to compile. ./src/components/charts/BaseOptionChart.js Syntax error: Identifier directly after number (20:50) 18 | border: '0 !important', 19 | fontWeight: theme.typography.fontWeightBold, > 20 | backgroundColor: `${theme.palette.grey[500_16]} !important`, | ^ 21 | color: theme.palette.text.secondary 22 | }, 23 | '.apexcharts-xaxistooltip-bottom': {Gracias a todos los que ayudaron, de hecho es un problema de babel.
En resumen, instale globalmente para corregir:
npm install --save-dev @babel/plugin-proposal-numeric-separatorPóngalo simple: al definir las propiedades, JS sabe que 500_16 debe ser una cadena, al leer las propiedades, debe decirlo.
Esa es una inconsistencia en JS que conduce a un caso extremo: 500_16 es un nombre de propiedad válido, pero no un accesor de propiedad válido, es decir, no puede usar la notación de puntos myObj.500_16 , pero tiene que usar la notación de corchetes, y ahora con la notación de corchetes solo puede utilice los tipos de nombre de propiedad válidos identificador de nombre , literal de cadena o literal numérico . 500_16 no es nada de eso: los identificadores no pueden comenzar con un número, las cadenas deben estar entre comillas y los números no pueden contener _ , en cambio, parece un número válido 500 seguido de un identificador válido _16 . Así que tienes que poner 500_16 entre comillas.
Compruébalo y encuentra detalles en https://mothereff.in/js-properties .
ES2021 podría presentar alguna complicación al presentar "Separadores numéricos" (ver nuevamente Mathias Bynens ). _ interpretado por su navegador como un separador numérico haría de 500_16 un número correcto 50016 , tanto en la definición como en la lectura de propiedades. En tal escenario, no surgiría el error "Identificador directamente después del número", pero myObj[500_16] no recuperaría la propiedad 500_16 , sino que devolvería undefined para una propiedad 50016 .