Fix 'Invalid class name' in JavaScript on Linux & Unix

You're staring at an error that says Invalid class name in your JavaScript code, and it's driving you nuts. I've been there — spent an hour on a client's Node.js app last month because of this exact thing. Let's cut to the chase.

The Fix

Open your terminal and check which file is throwing the error. The most common cause is using a reserved word or an invalid character in a class name inside a class expression or a class declaration. Here's what to look for:

1. Run grep -n 'class.*{' your-file.js to find all class declarations or expressions.
2. Look for names that start with a number, contain a hyphen, or use a reserved JavaScript keyword like delete, void, return, class, or extends.
3. Change the name to something valid — alphanumeric, starting with a letter, underscore, or dollar sign.

For example, this will fail:

const obj = {
  'class': function() {}
};

But this works:

const obj = {
  myClass: function() {}
};

Why It Happens

The JavaScript engine parses your code and sees a class keyword where it expects a class name. If the next token is invalid — like a string literal, a number, or a reserved word — it throws Invalid class name. This is part of the ECMAScript spec for class syntax, and it's been around since ES6.

On Linux or Unix systems, this often shows up in Node.js 12+ or when using Babel to transpile JSX or TypeScript. I once had a client's build pipeline fail on Ubuntu because a developer used delete as a class property name in a React component. The transpiled code created a class expression with delete as the class name, which crashed the browser.

Less Common Variations

Here are a few weird cases I've seen in the wild:

• Dynamic class names: Using class [computedName] in a class expression — this isn't valid JavaScript. If you're using a framework like Angular or Vue that generates classes dynamically, check the compiled output.
• Minified code: Some minifiers can accidentally produce invalid class names by mangling too aggressively. Update Terser or UglifyJS to the latest version.
• TypeScript enums or namespaces: If you're using TypeScript with namespaces inside class declarations, the transpiled code might generate invalid class names. Stick to standard class syntax.
• Babel plugins: Custom Babel plugins (like @babel/plugin-proposal-class-properties) can sometimes misinterpret syntax. Try disabling plugins one by one to find the culprit.

Prevention

You can avoid this with a few simple habits:

• Use a linter like ESLint with no-restricted-syntax rule to catch reserved words in class names.
• Never use computed property names for class declarations or expressions — just use string keys for objects if you need dynamic names.
• Stick to PascalCase for class names (as per convention), and avoid names that look like built-in objects like Function or Object.
• Run node --check your-file.js before deploying to catch syntax errors early.

I've seen this error pop up in CI/CD pipelines more times than I can count. The fix is almost always a single character change — just rename the class. Save yourself the headache and use a linter next time.