How to fix `Invalid or unexpected token`

This cryptic error means the JavaScript parser encountered a character it doesn’t recognize as valid JavaScript at all. Unlike “Unexpected token X” (where X is a recognizable character like < or }), “Invalid or unexpected token” signals that the lexer can’t even categorize what it’s looking at.

The frustrating part? The problematic character is often invisible. Smart quotes copied from Word documents, zero-width spaces from Slack, or byte order marks (BOM) from Windows editors can all trigger this error while looking perfectly normal in your code editor.

The Problem

“Invalid or unexpected token” is a SyntaxError that occurs during the lexical analysis phase, before your code even begins executing. The parser hit something it cannot process as a valid JavaScript token.

The error typically happens in scenarios like this: ​

// This looks fine but contains a smart quote from copy-paste
const message = “Hello world“  // ← The “ is actually Unicode U+201C

// This has an invisible zero-width space before the variable name
const ​userName = "Alice";  // ← Zero-width space before 'userName'

Key point: The error message often points to where parsing failed, not where the actual problem character exists. An unclosed string on line 10 might report an error on line 50.

“Invalid” vs “Unexpected” Token

These two error types indicate different problems:

“Invalid or unexpected token” means the lexer doesn’t recognize the character at all. Common with invisible Unicode characters, smart quotes, or BOM markers.

“Unexpected token X” (where X is ., <, }, etc.) means the lexer recognized a valid JavaScript token, but it appeared somewhere grammatically illegal. The character is fine, the placement isn’t.

// Invalid or unexpected token - lexer doesn't know what " is
const x = "hello"    // Smart quote, not a valid JS character

// Unexpected token . - lexer knows what . is, wrong placement
const x = ..5        // Double dot, valid character, wrong context

// Unexpected token , - lexer knows comma, wrong placement
const y = {,}        // Comma with nothing before it

Understanding the Root Cause

“Invalid or unexpected token” can stem from several sources, with invisible characters being the most common and frustrating:

1. Smart Quotes from Copy-Paste

Most common cause: Word processors automatically convert straight quotes (") to typographic “smart quotes” (""), which are entirely different Unicode characters that JavaScript doesn’t recognize as string delimiters.

Pasting code from Microsoft Word, Google Docs, Notion, or even Slack often introduces U+201C/U+201D (curly double quotes) or U+2018/U+2019 (curly single quotes).

How to identify: The error occurs immediately after pasting code from a document or chat application.

2. Byte Order Mark (BOM) Characters

The BOM, encoded as EF BB BF in UTF-8, frequently infiltrates files saved by Windows applications. When present at a file’s start, Node.js reports the strange character sequence  representing the invisible BOM.

How to identify: Errors occur at the very beginning of files, especially files edited on Windows or received from external sources.

3. Zero-Width Characters

Copying code from websites, PDFs, or chat applications often includes invisible Unicode characters like U+200B (Zero Width Space), U+200C (Zero Width Non-Joiner), or U+2028 (Line Separator). The line separator is particularly tricky because it’s valid in most contexts but illegal inside JavaScript string literals.

How to identify: The error points to a line that looks completely normal, with no visible issues.

4. File Encoding Mismatches

A file saved as UTF-16 but read as UTF-8 produces garbage bytes the parser cannot interpret. This commonly happens when files move between systems with different default encodings.

How to identify: Multiple strange characters appear in error messages, or errors occur immediately when loading files from different operating systems.

5. Corrupted Files or Partial Downloads

Incomplete file transfers, git merge conflicts that weren’t resolved, or text editors that crashed during save can leave files with corrupted or partial content.

How to identify: Errors started after a file transfer, git operation, or unexpected editor closure.

How to Fix “Invalid or unexpected token”

Quick Troubleshooting Checklist

• Check if you recently copy-pasted code from a document or website
• Look for the BOM character at the start of files
• Use a hex editor or command-line tools to find invisible characters
• Retype the problematic line manually instead of copying
• Check file encoding settings in your editor
• Test if the error persists after removing and retyping quotes

If basic checks don’t resolve the issue, follow these systematic debugging steps:

Step 1: Find Invisible Characters with Command-Line Tools

Use terminal commands to reveal hidden characters:

# Show invisible characters (tabs as ^I, non-printables as ^M)
cat -A file.js

# Hex dump to see exact byte values
xxd file.js | head -20

# Check file encoding and BOM presence
file file.js

# Check specifically for BOM bytes (ef bb bf)
head -c 3 file.js | xxd

Step 2: Configure Your Editor to Show Invisible Characters

VS Code can highlight dangerous invisible characters with the right settings:

// VS Code settings.json
{
  "editor.renderWhitespace": "all",
  "editor.renderControlCharacters": true,
  "files.encoding": "utf8",
  "files.eol": "\n"
}

The Gremlins extension for VS Code provides even better detection, highlighting dangerous invisible characters with red indicators in the gutter.

Step 3: Clean Up Copy-Pasted Code

When you’ve pasted code from external sources, this cleanup function handles common substitutions:

// Clean common copy-paste character problems
function cleanCopiedCode(text) {
  return text
    .replace(/[\u2018\u2019]/g, "'")   // Curly single quotes → straight
    .replace(/[\u201C\u201D]/g, '"')   // Curly double quotes → straight
    .replace(/\u2014/g, '--')          // Em-dash → double hyphen
    .replace(/\u00A0/g, ' ')           // Non-breaking space → regular space
    .replace(/^\uFEFF/, '');           // Remove BOM at start
}

The safest practice is always using Paste as Plain Text (Ctrl+Shift+V or Cmd+Shift+V) when copying code from any document or webpage.

Step 4: Remove the BOM from Files

If your file has a BOM character, remove it:

# Remove BOM from a file using sed
sed -i '1s/^\xEF\xBB\xBF//' file.js

# Or use Node.js to strip it
node -e "const fs = require('fs'); let c = fs.readFileSync('file.js', 'utf8'); fs.writeFileSync('file.js', c.replace(/^\uFEFF/, ''));"

Step 5: Use Binary Search to Isolate the Problem

When the error message doesn’t point to the actual problem, use the binary search method:

1. Comment out half the file
2. Check if the error persists
3. If it does, the problem is in the remaining code
4. If it doesn’t, the problem is in the commented section
5. Repeat until you isolate the problematic line

Step 6: Just Retype It

When all else fails, manually retype the problematic line. This is often faster than hunting for invisible characters, and guarantees you’re using only valid characters.

Step 7: Monitor for Patterns in Production

Syntax errors like this shouldn’t reach production, but encoding issues can slip through when files are processed by different systems. Error monitoring services like TrackJS help you identify if users are encountering these errors, which might indicate build pipeline problems or file serving issues.

Track whether these errors correlate with specific browsers, operating systems, or geographic regions where different default encodings might be in play.

When to Ignore This Error

“Invalid or unexpected token” should never be ignored because it prevents code from running at all. However, consider the source:

• Build tool output: The error might be in generated code, requiring you to fix the source file or build configuration
• Third-party scripts: External scripts with encoding issues are outside your control but should still be reported to the vendor
• Development only: If errors only occur in development, check your local file encoding settings

Investigate immediately when you see:

• Production errors: Any syntax error reaching users indicates a serious build or deployment problem
• After deployments: New encoding issues might have been introduced
• Specific file patterns: Certain files or directories consistently causing problems

Related Errors

If you’re seeing similar parsing errors, these might be relevant:

• “Unexpected token ‘<’” - Often indicates HTML was served instead of JavaScript

Summary

“Invalid or unexpected token” means the JavaScript parser encountered something it can’t recognize as valid syntax, typically an invisible Unicode character, smart quote, or BOM marker. Unlike “Unexpected token X” errors (where the parser knows what the character is but can’t use it there), this error indicates truly unrecognizable input.

The solution usually involves finding and removing invisible characters using command-line tools or editor extensions, cleaning up copy-pasted code, and ensuring consistent file encoding across your development environment. When in doubt, manually retype the problematic line.

Prevention is more effective than debugging. Configure your editor to show invisible characters, always paste as plain text when copying code from external sources, and use EditorConfig or similar tools to enforce consistent encoding across your team.