This error occurs when you try to use 'import' as a variable name, function parameter, or unquoted object property. Since 'import' is a reserved keyword in JavaScript ES6 module syntax, it cannot be used as an identifier without causing this syntax error.
Fixes The keyword 'import' is reserved
// ❌ Wrong
const import = await fetchData();
let import = response.data;
// ✅ Correct
const importData = await fetchData();
let importedContent = response.data;// ❌ Wrongconst import = await fetchData();let import = response.data;// ✅ Correctconst importData = await fetchData();let importedContent = response.data;The keyword 'import' is reserved
The 'import' keyword is reserved in JavaScript for ES6 module syntax (import statements). When your code attempts to use 'import' as a variable name, function parameter, or property identifier, the JavaScript parser throws a syntax error because it conflicts with the reserved keyword. This is distinct from ESLint parsing errors - it's a fundamental JavaScript syntax issue.
Replace 'import' with a descriptive alternative like 'importData', 'importModule', 'importFile', or 'importedContent':
// ❌ Wrong
const import = await fetchData();
let import = response.data;
// ✅ Correct
const importData = await fetchData();
let importedContent = response.data;If you're destructuring an object that has an 'import' property, use the renaming syntax (import as):
// ❌ Wrong
const {import} = apiResponse;
const {import, export} = moduleData;
// ✅ Correct
const {import: importData} = apiResponse;
const {import: importType, export: exportType} = moduleData;When accessing object properties with reserved keyword names, use bracket notation instead of dot notation:
// ❌ Wrong
const value = obj.import;
const type = data.export;
// ✅ Correct
const value = obj['import'];
const type = data['export'];If 'import' appears as a function parameter or argument, rename it:
// ❌ Wrong
function processData(import) {
return import.value;
}
const handler = (import) => import.type;
// ✅ Correct
function processData(importedData) {
return importedData.value;
}
const handler = (importData) => importData.type;Make sure your .babelrc or babel.config.js includes presets to handle modern JavaScript:
{
"presets": [
["@babel/preset-env", {"targets": {"browsers": ["last 2 versions"]}}],
"@babel/preset-react",
"@babel/preset-typescript"
]
}For Create React App projects, this is already configured for you.
JavaScript reserved keywords that cannot be used as identifiers include: abstract, arguments, await, boolean, break, byte, case, catch, char, class, const, continue, debugger, default, delete, do, double, else, enum, eval, export, extends, false, final, finally, float, for, function, goto, if, implements, import, in, instanceof, int, interface, let, long, native, new, null, package, private, protected, public, return, short, static, super, switch, synchronized, this, throw, throws, transient, true, try, typeof, var, void, volatile, while, with, and yield. In strict mode and module contexts, additional words are reserved. When working with external APIs or JSON responses that use reserved words as property names, always use bracket notation or destructuring with renaming. Never quote property names when assigning (const import = ... won't work), but quoted keys in object literals are acceptable (const obj = { 'import': value }).