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.
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.
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
}
}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...}.
React Hook useCallback has a missing dependency: 'variable'. Either include it or remove the dependency array react-hooks/exhaustive-deps
React Hook useCallback has a missing dependency
Cannot use private fields in class components without TS support
Cannot use private fields in class components without TS support
Cannot destructure property 'xxx' of 'undefined'
Cannot destructure property of undefined when accessing props
useNavigate() may be used only in the context of a <Router> component.
useNavigate() may be used only in the context of a Router component
Cannot find module or its corresponding type declarations
How to fix "Cannot find module or type declarations" in Vite