Invalid class name in JavaScript: the real fix

You're staring at Uncaught SyntaxError: Invalid class name and the console is being a jerk about it. I get it. Had a client last month whose entire React app crashed in production because of this. The fix is usually dead simple: your class name breaks one of JavaScript's naming rules.

Fix: Use a valid class name

JavaScript class names must follow the same rules as variable names. They must start with a letter, underscore (_), or dollar sign ($). After that, you can use letters, digits, underscores, or dollar signs. No spaces, no hyphens, no special characters.

If you wrote something like this:

class 123myClass {}  // starts with a digit
class my-class {}    // contains a hyphen
class my class {}    // contains a space
class let {}         // reserved word

You'll get the error. Change it to:

class MyClass {}
class MyClass123 {}
class my_class {}
class $myClass {}

Boom. No more syntax errors.

Why it works

JavaScript's parser is strict about identifiers. A class name is an identifier, and identifiers can't start with digits or include special characters like hyphens or spaces. Also, you can't use reserved words like let, if, class, or return as class names — the language reserves them for syntax.

The real fix is recognizing that JavaScript treats class as just a wrapper for a constructor function. The name has to be a valid identifier because it becomes a variable under the hood. Break that rule, and the parser throws an error before your code ever runs.

One more thing: if you're using ES modules or a transpiler like Babel, the error might appear in a compiled file. I once spent two hours tracking this down — the original source used a perfectly valid name, but Babel's output mangled it into something invalid. Check your compiled output if the error doesn't match your source.

Less common variations to watch for

Using a Unicode character that looks like a letter but isn't

Some Unicode characters (like full-width letters or emoji) are technically allowed in identifiers, but they can cause cryptic errors. Stick to ASCII letters.

Class expression with a missing name

You can write a class expression without a name:

const MyClass = class { };

But if you try to give it an invalid name inside the expression, you'll get the same error:

const MyClass = class 123invalid { };

That's a syntax error. Just drop the name or use a valid one.

Dynamically generating class names (rare but real)

I had a client who built a plugin system that generated class names from user input. Someone typed a class name with a space, and the whole system crashed. The fix: sanitize input to only allow valid identifier characters, or use a mapping object instead of eval/new Function.

const sanitized = className.replace(/[^a-zA-Z0-9_$]/g, '');

But honestly, avoid dynamic class creation unless you absolutely need it.

Prevention: Naming conventions that work

• Use PascalCase for class names: MyComponent, UserService
• Never start a class name with a digit
• Avoid hyphens, spaces, and special characters
• Don't use reserved words — if you must, uppercase the first letter: Let works, let doesn't
• If you're using TypeScript or Babel, add a lint rule: @typescript-eslint/naming-convention can catch these before runtime
• Run a linter in your CI — ESLint with no-new-obj or id-match rules catches invalid identifiers early

If you're working with a legacy codebase that creates classes dynamically (like a framework that parses config files), add a validation step. try { eval('class ' + name + '{}') } catch is a hacky but effective way to test if a string is a valid class name before using it.

Bottom line: JavaScript's class naming rules aren't complicated, but they're unforgiving. Stick to letters, underscores, and dollar signs, and you'll never see this error again.