Syntax error: Identifier directly after number

Question

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': {

Answer 1

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

Answer 2

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.