This error occurs when your import statement has incorrect syntax, typically due to mismatched curly braces, imports at wrong scope level, or file not being treated as a module. In React, common causes include forgetting curly braces for named exports or incorrectly using default import syntax.
The "SyntaxError: Unexpected identifier in import statement" error occurs when the JavaScript parser encounters an invalid syntax structure in your import declaration. This typically means the parser expected a specific token (like a comma, closing brace, or semicolon) but found an identifier instead. In React applications, this error most commonly happens due to one of three issues: 1. **Incorrect curly brace usage**: Forgetting curly braces when importing named exports, or incorrectly using curly braces with default exports. 2. **Import statement placement**: Attempting to place an import statement inside a function, conditional block, or anywhere other than the module's top level. 3. **Module system misconfiguration**: Your file is not being treated as an ES module, causing the JavaScript parser to reject the import syntax entirely. The error name "Unexpected identifier" refers to the parser finding a variable name or identifier where it expected different syntax structure.
The most common cause is incorrect curly brace syntax. Determine whether you're importing a named export or default export:
Default exports (no curly braces):
// Correct
import React from 'react';
import App from './App';
// Wrong - includes curly braces
import { React } from 'react'; // SyntaxError!Named exports (with curly braces):
// Correct
import { useState, useEffect } from 'react';
import { Button, Card } from './components/ui';
// Wrong - missing curly braces
import useState from 'react'; // SyntaxError!Mixed imports (both default and named):
// Correct
import React, { useState, useEffect } from 'react';
// Wrong - curly braces in wrong order
import { useState }, React from 'react'; // SyntaxError!Review your import statements and add or remove curly braces as needed based on what the module exports.
Import statements must appear at the very top of your file, before any other code. They cannot be nested inside functions, conditionals, or class bodies.
Correct - import at top level:
import { useState } from 'react';
import { Button } from './ui';
export function MyComponent() {
// Code here
}Wrong - import inside function:
export function MyComponent() {
import { useState } from 'react'; // SyntaxError!
// Code here
}Wrong - import inside conditional:
if (someCondition) {
import { useState } from 'react'; // SyntaxError!
}If you need conditional imports, use dynamic import with the async/await or .then() syntax:
// Dynamic import - loads at runtime
if (someCondition) {
import('react').then(({ useState }) => {
// Use useState here
});
}
// Or with async/await
async function loadStuff() {
const { useState } = await import('react');
// Use useState here
}For browser environments, add type="module" to your script tag:
<!-- Without type="module" - import won't work -->
<script src="index.js"></script>
<!-- Correct - tells browser this is an ES module -->
<script type="module" src="index.js"></script>For Node.js environments, ensure your package.json has:
{
"type": "module",
"name": "my-project",
"version": "1.0.0"
}Or use the .mjs file extension instead (script.mjs instead of script.js).
For Create React App or Next.js, this configuration is handled automatically—ES modules are supported by default.
If using Webpack, Jest, or Babel directly, verify your configuration handles ES modules:
For Babel (.babelrc or babel.config.js):
{
"presets": [
"@babel/preset-react",
["@babel/preset-env", { "modules": "auto" }]
]
}For Jest (jest.config.js):
module.exports = {
transform: {
'^.+\\.(js|jsx|ts|tsx)$': 'babel-jest',
},
testEnvironment: 'jsdom',
};Make sure:
- The @babel/preset-react preset is installed for JSX support
- Your bundler or test runner has Babel configured to transform import statements
- File extensions are included in your transforms (if using TypeScript, include .ts and .tsx)
Review the exact spelling of the import keyword and module name:
Common typos:
impor { useState } from 'react'; // Wrong - typo in keyword
import { useState } form 'react'; // Wrong - 'form' instead of 'from'
import { useState } from 'rreact'; // Wrong - extra 'r' in module nameAlso check for extra spaces or characters:
import { useState } from 'react'; // Might be treated as error in some parsersThe whitespace itself is usually fine, but verify the keyword import and preposition from are spelled correctly.
ESM vs CommonJS: Modern React and Next.js projects exclusively use ES modules (import/export), but legacy projects may mix CommonJS (require/module.exports). If your codebase has both, ensure you're not trying to use import syntax in a CommonJS-only file.
TypeScript considerations: If using TypeScript, the same rules apply. Ensure your tsconfig.json has appropriate module and moduleResolution settings:
{
"compilerOptions": {
"module": "esnext",
"moduleResolution": "node",
"target": "esnext"
}
}Re-exports: When re-exporting from other modules, ensure syntax matches:
// Re-export named exports
export { useState, useEffect } from 'react';
// Re-export default export
export { default as Button } from './Button';
// Re-export everything
export * from './utils';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