How to fix Unexpected escape sequence in attribute in React
The "Unexpected escape sequence in attribute" error occurs when React encounters invalid escape sequences like backslashes in JSX attribute values. This typically happens when using Windows file paths, regular expressions, or special characters without proper escaping. Understanding JSX attribute syntax rules helps prevent this parsing error.
Quick fix
Fixes Unexpected escape sequence in attribute
// WRONG - causes escape sequence error
<img src="C:\\Users\\name\\image.png" />
// CORRECT - use forward slashes
<img src="C:/Users/name/image.png" />
// Even better - use relative paths
<img src="/images/avatar.png" />- Replace backslashes with forward slashes for file paths
- Escape backslashes by doubling them
- Use template literals or variables for complex strings
- Encode special characters using encodeURI or encodeURIComponent
// WRONG - causes escape sequence error<img src="C:\\Users\\name\\image.png" />// CORRECT - use forward slashes<img src="C:/Users/name/image.png" />// Even better - use relative paths<img src="/images/avatar.png" />Unexpected escape sequence in attribute
What this error means
In JSX, attribute values are parsed as JavaScript string literals. When React encounters a backslash (\) or other escape sequences in an attribute value, it expects them to follow JavaScript escape sequence rules (like \n for newline, \t for tab). If an invalid escape sequence appears, React throws this error during parsing. This commonly occurs when using Windows file paths (C:\Users\name), regular expressions with backslashes, or trying to include literal backslashes without proper escaping. The error happens at compile time with tools like Babel or TypeScript, preventing the component from rendering.
Typical symptoms
- Compilation fails with error: "Unexpected escape sequence in attribute"
- Build tools like Webpack, Vite, or Next.js fail to compile JSX
- TypeScript shows red squiggly lines under attribute values with backslashes
- Component fails to render and shows a blank screen or error boundary
- Error occurs specifically on lines with file paths, regex patterns, or special characters in attributes
- Development server hot reload fails when adding problematic attributes
Common causes
- Using Windows file paths with backslashes in src, href, or other attributes without proper escaping
- Including regular expression literals with backslashes directly in JSX attributes
- Trying to use escape sequences like \u, \x, or \ followed by invalid characters in attribute values
- Copy-pasting file paths or commands from Windows systems into JSX without modification
- Using backslashes for directory separators in import paths within JSX attributes
- Incorrectly escaping JSON strings or template literals inside attribute values
How to fix "Unexpected escape sequence in attribute"
Windows file paths use backslashes (\), but URLs and most file systems accept forward slashes (/). Replace all backslashes in file paths with forward slashes.
// WRONG - causes escape sequence error
<img src="C:\\Users\\name\\image.png" />
// CORRECT - use forward slashes
<img src="C:/Users/name/image.png" />
// Even better - use relative paths
<img src="/images/avatar.png" />If you must use backslashes (for regex patterns or specific APIs), escape each backslash with another backslash. In JavaScript strings, \\ represents a single backslash.
// WRONG - single backslash causes escape sequence
<div data-regex="/\\d+/" />
// CORRECT - double the backslashes
<div data-regex="/\\\\d+/" />
// For Windows paths that must stay as backslashes
<a href="C:\\\\Users\\\\name\\\\file.txt">File</a>Move complex strings with escape sequences into JavaScript variables or template literals, then reference them in JSX. This separates string construction from JSX parsing.
// WRONG - complex escape in JSX
<div pattern="\\w+\\d{3}" />
// CORRECT - use a variable
const pattern = "\\w+\\d{3}";
return <div pattern={pattern} />;
// Also correct - template literal
const regex = new RegExp(`\\w+\\d{3}`);
return <div data-regex={regex.source} />;For URLs or data attributes containing special characters, use proper encoding functions instead of raw strings with escape sequences.
// WRONG - unencoded special characters
<a href="C:\\Program Files\\app\\data.json">Link</a>
// CORRECT - encode the path
const filePath = encodeURI("C:/Program Files/app/data.json");
return <a href={filePath}>Link</a>;
// For query parameters
const query = encodeURIComponent("C:\\temp\\file.txt");
return <a href={`/download?file=${query}`}>Download</a>;When storing complex objects in data attributes, use JSON.stringify which properly escapes the content. Parse it back with JSON.parse when reading.
// Complex data with potential escape sequences
const config = {
path: "C:\\Users\\name",
pattern: "\\d+\\.\\d+"
};
// CORRECT - JSON.stringify handles escaping
return (
<div
data-config={JSON.stringify(config)}
onClick={() => {
const data = JSON.parse(e.currentTarget.dataset.config);
console.log(data.path);
}}
/>
);If using TypeScript, ensure your tsconfig.json doesn't have overly strict settings that might flag valid escape sequences. The "noImplicitAny" and "strict" flags are fine, but check for custom rules.
{
"compilerOptions": {
"target": "es2020",
"lib": ["dom", "dom.iterable", "esnext"],
"jsx": "preserve", // or "react-jsx"
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
}
}Advanced notes
This error is specific to JSX parsing, not JavaScript itself. In regular JavaScript strings, invalid escape sequences become literal characters (e.g., "\\z" becomes "z"), but JSX parsers are stricter. Babel and TypeScript both validate escape sequences in JSX attributes. When working with file paths, consider using the path module in Node.js to normalize paths before using them in JSX. For cross-platform compatibility, always use forward slashes or the path.sep property. In Next.js, the public folder serves files at the root URL, so you can reference images as "/image.png" regardless of the underlying file system. Remember that JSX attribute values are always strings, so any backslash starts an escape sequence. The only valid escape sequences in JavaScript are: \\\', \\", \\\\, \\n, \\r, \\t, \\b, \\f, \\v, \\0, \\xXX, \\uXXXX, and \\u{X...}.
Frequently asked questions
- What does "Unexpected escape sequence in attribute" mean?
- In JSX, attribute values are parsed as JavaScript string literals. When React encounters a backslash (\) or other escape sequences in an attribute value, it expects them to follow JavaScript escape sequence rules (like \n for newline, \t for tab). If an invalid escape sequence appears, React throws this error during parsing.
- How do I fix "Unexpected escape sequence in attribute"?
- The "Unexpected escape sequence in attribute" error occurs when React encounters invalid escape sequences like backslashes in JSX attribute values. This typically happens when using Windows file paths, regular expressions, or special characters without proper escaping. Understanding JSX attribute syntax rules helps prevent this parsing error.
- What causes "Unexpected escape sequence in attribute"?
- Using Windows file paths with backslashes in src, href, or other attributes without proper escaping Including regular expression literals with backslashes directly in JSX attributes Trying to use escape sequences like \u, \x, or \ followed by invalid characters in attribute values
- Is the "Unexpected escape sequence in attribute" error serious?
- It is a medium-severity error — more of a blocker than a risk. The steps above resolve it.
Official resources & further reading
- 📚React Official Documentation
- 📖React JSX documentation(Official Docs)
- 📖MDN JavaScript escape sequences(Official Docs)
- 📖Babel JSX transformation documentation(Official Docs)
- 📖TypeScript JSX documentation(Official Docs)