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.
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 }).
Prop spreading could cause security issues
Prop spreading could cause security issues
Error: error:0308010C:digital envelope routines::unsupported
Error: error:0308010C:digital envelope routines::unsupported
React Hook "useEffect" is called conditionally. React Hooks must be called in the exact same order in every component render.
React Hook useEffect placed inside a condition
Hook can only be called inside the body of a function component
Hook can only be called inside the body of a function component
Rollup failed to resolve import during build
How to fix "Rollup failed to resolve import" in React