I'm using a library which has colours defined this way: 500_. Every mention of this inside the library's code throws a syntax error.
It works fine on my friend's computer, how do I fix this?
Palette.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': {
Thanks to everyone that helped, it is indeed a babel issue.
In short, install globally to fix:
npm install --save-dev @babel/plugin-proposal-numeric-separator
Put it simple: on defining properties JS knows that 500_16 should be a string, on reading properties you have to tell it.
That's some inconsistency in JS leading to an edge case: 500_16 is a valid property name, but not a valid property accessor, i.e. you cannot use dot notation myObj.500_16, but have to use bracket notation - and now with bracket notation you can only use the valid property name types identifier name, string literal, or numerical literal. 500_16 is none of that: identifiers cannot start with a number, strings have to be enclosed in quotes, and numbers cannot contain _, instead it looks like valid number 500 followed by a valid identifier _16. So you have to put 500_16 in quotes.
Check it and find details on https://mothereff.in/js-properties.
Some complication might brought in by ES2021 introducing "Numeric Separators" (see again Mathias Bynens). _ interpreted by your browser as a numeric separator would make 500_16 a correct number 50016, as well in defining as in reading properties. In such a scenario no "Identifier directly after number" error would arise, but myObj[500_16] would not retrieve the property 500_16, but return undefined for a property 50016.