Parsing error: Unexpected token <
Parsing error: Unexpected token =>
Parsing error: The keyword 'import' is reserved
ESLint can’t parse your code because it doesn’t understand the syntax you’re using (JSX, TypeScript, modern JS features).
Fix 1: JSX Not Recognized
Parsing error: Unexpected token <
ESLint doesn’t understand JSX by default.
For React projects:
npm install -D eslint @eslint/js globals @eslint/compat
// eslint.config.js (flat config)
import js from '@eslint/js';
export default [
js.configs.recommended,
{
files: ['**/*.{js,jsx}'],
languageOptions: {
parserOptions: {
ecmaFeatures: { jsx: true }
}
}
}
];
Fix 2: TypeScript Not Recognized
Parsing error: Unexpected token
ESLint needs a TypeScript parser.
npm install -D typescript-eslint
// eslint.config.js
import tseslint from 'typescript-eslint';
export default tseslint.config(
...tseslint.configs.recommended,
);
Fix 3: Modern JavaScript Syntax
Parsing error: The keyword 'import' is reserved
ESLint defaults to ES5. Tell it you’re using modern JS:
// eslint.config.js
export default [
{
languageOptions: {
ecmaVersion: 'latest',
sourceType: 'module'
}
}
];
Fix 4: Wrong File Extension
ESLint might not know to parse .tsx or .mjs files:
// eslint.config.js
export default [
{
files: ['**/*.{js,jsx,ts,tsx,mjs}'],
// ... your config
}
];
Fix 5: Conflicting ESLint Configs
If you have both .eslintrc and eslint.config.js, delete one. ESLint 9+ uses flat config (eslint.config.js) by default.
# Remove old config
rm .eslintrc .eslintrc.js .eslintrc.json .eslintrc.yml
# Keep only eslint.config.js
Quick Diagnosis
# Check which config ESLint is using
npx eslint --print-config src/App.tsx
# Run with debug info
npx eslint --debug src/App.tsx 2>&1 | head -20