Invalid class name error in JavaScript on Linux: fix

Yeah, I know — you're staring at an 'invalid class name' error in your JavaScript file on a Linux box and it's annoying. The good news? The culprit here is almost always something stupid simple: a reserved word being used as a class name, or a missing quote in object key syntax. Let me save you the hunting.

The fix

First, check if you're using a JavaScript keyword as a class name. Words like class, default, return, if, for, switch, delete, new, typeof, in, instanceof, function, var, let, const are all off-limits. If you wrote something like:

class default { ... } // ERROR

That's your problem. Change it to anything else, like DefaultClass or defaultItem. Rename it to something that isn't a reserved word. That's literally the fix 80% of the time.

If you're not using a reserved word, the next most common cause is forgetting quotes around a property name in an object literal that contains a hyphen or starts with a number. For example:

let obj = { class-name: 'value' }; // ERROR

That hyphen makes the parser think class is a keyword followed by -name, which is an invalid expression. Fix it by adding quotes:

let obj = { 'class-name': 'value' }; // WORKS

Also check for class definitions inside a function that's missing a closing bracket, or a stray comma in an object literal. Those can also trigger this error in weird ways.

Why it works

JavaScript's parser is strict. It reserves certain words for language constructs. When you try to use a reserved word as an identifier (like a class name), the engine throws an 'invalid class name' error because it can't tell if you're writing a class declaration or something else. Same deal with hyphens in object keys — they break the parser's expectation of a simple identifier, so it errors out. Quoting the key tells the parser to treat it as a string literal, bypassing the keyword check.

Less common variations

Alright, sometimes the issue is trickier. Here are a few I've seen:

Transpiled code (Babel, TypeScript) — If you're using a modern framework on Linux and running through Babel or TypeScript, the error might come from a generated file. Check the output file. The transpiler might have mangled a class name or inserted a reserved word. I've seen Babel produce class _class in some edge cases. Re-run the build.
Node.js version mismatch — Old Node versions (pre-12) didn't support class syntax natively. If you're running an ancient Node, try updating to current LTS. Run node -v. If it's below 12, that's your problem.
Minified code — Ugly minifiers can choke on class declarations. Check if you're running a minifier that doesn't support ES6. Switch to Terser.
Dynamic class names with eval or new Function — If you're building class names dynamically, make sure the string you're passing is a valid identifier. A space or number in the string will break it.
CSS class selectors in JavaScript — Sometimes devs confuse CSS class selectors (with a dot) with JavaScript class names. If you're using document.querySelector('.class-name'), that's fine. But if you're trying to use that string as a JS class name, it won't work.

Prevention

Stop using reserved words as identifiers. That's rule one. For object keys, always quote them if they contain hyphens, spaces, or start with a number. For class names, stick to camelCase or PascalCase, avoid hyphens. If you're writing ES6 classes, don't use class as a variable name anywhere.

Also, run a linter. Seriously. ESLint with the no-shadow-restricted-names rule catches this immediately. I run it on every project now because I've spent too many hours debugging this exact nonsense. Set it up, it's fast.

And for the love of sanity, test your code in a modern browser or Node version before blaming the Linux environment. The OS isn't the problem — your syntax is.