How to fix The keyword 'import' is reserved in React

ReactINTERMEDIATEHIGHUpdated Dec 9, 2025· 96 views

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.

Quick fix

Fixes The keyword 'import' is reserved

// ❌ Wrong
const import = await fetchData();
let import = response.data;

// ✅ Correct
const importData = await fetchData();
let importedContent = response.data;
  1. Rename the variable to a different name
  2. Use object renaming when destructuring
  3. Use bracket notation for property access
  4. Fix function parameters
react — error
// ❌ Wrong
const import = await fetchData();
let import = response.data;
// ✅ Correct
const importData = await fetchData();
let importedContent = response.data;
The keyword 'import' is reserved

What this error means

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.

Typical symptoms

  • SyntaxError: The keyword 'import' is reserved
  • Code fails to compile or execute immediately
  • Error appears when trying to assign or use 'import' as a variable
  • Parsing error in build tools like Webpack or Babel
  • Cannot destructure object properties named 'import'

Common causes

  1. Using 'import' as a variable name (e.g., const import = ...)
  2. Using 'import' as a function parameter (e.g., function foo(import) {})
  3. Destructuring an object with 'import' as the target variable
  4. Attempting to access object.import without bracket notation
  5. API responses or JSON with 'import' property being assigned directly
  6. Babel not configured to transpile modern JavaScript properly

How to fix "The keyword 'import' is reserved"

1Rename the variable to a different name

Replace 'import' with a descriptive alternative like 'importData', 'importModule', 'importFile', or 'importedContent':

javascript
// ❌ Wrong
const import = await fetchData();
let import = response.data;

// ✅ Correct
const importData = await fetchData();
let importedContent = response.data;
2Use object renaming when destructuring

If you're destructuring an object that has an 'import' property, use the renaming syntax (import as):

javascript
// ❌ Wrong
const {import} = apiResponse;
const {import, export} = moduleData;

// ✅ Correct
const {import: importData} = apiResponse;
const {import: importType, export: exportType} = moduleData;
3Use bracket notation for property access

When accessing object properties with reserved keyword names, use bracket notation instead of dot notation:

javascript
// ❌ Wrong
const value = obj.import;
const type = data.export;

// ✅ Correct
const value = obj['import'];
const type = data['export'];
4Fix function parameters

If 'import' appears as a function parameter or argument, rename it:

javascript
// ❌ Wrong
function processData(import) {
  return import.value;
}

const handler = (import) => import.type;

// ✅ Correct
function processData(importedData) {
  return importedData.value;
}

const handler = (importData) => importData.type;
5Ensure Babel is properly configured

Make sure your .babelrc or babel.config.js includes presets to handle modern JavaScript:

json
{
  "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.

Advanced notes

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 }).

Frequently asked questions

What does "The keyword 'import' is reserved" mean?
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.
How do I fix "The keyword 'import' is reserved"?
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.
What causes "The keyword 'import' is reserved"?
Using 'import' as a variable name (e.g., const import = ...) Using 'import' as a function parameter (e.g., function foo(import) {}) Destructuring an object with 'import' as the target variable
Is the "The keyword 'import' is reserved" error serious?
Yes. This is a high-severity error that usually blocks work until it is fixed, but the steps above resolve it.

Official resources & further reading