Hey there, let's figure out why you're getting this duplicate declaration error for Icon even though you think you didn't declare it twice. Here are the most common fixes:

1. Double-check your Spinner.js file for accidental re-declaration #

The error points to a duplicate Icon variable, so start by looking at the full code in Spinner.js (your snippet cuts off, so this is the most likely culprit).

Look for any lines where you might be redefining Icon after importing it from Ant Design. For example:

// Spinner.js
import { Spin, Icon } from 'antd';

// ❌ This causes a duplicate declaration!
const Icon = () => <span>My custom icon</span>;

If you have a custom component or variable named Icon, rename it to something unique (like CustomIcon) to avoid conflicting with the imported Ant Design component.

2. Ensure no duplicate imports of Icon in the same scope #

Make sure you're not importing Icon multiple times in the same file using different syntax. For example:

// ❌ Duplicate imports will trigger the error
import { Icon } from 'antd';
import Icon from 'antd/lib/icon';

Stick to one consistent import style—either use the named import from the main antd module, or import directly from the component submodule, but never both in the same file.

3. Check for circular dependencies #

If your App.js imports Spinner, and Spinner (or a component it imports) circles back to import something from App.js, this can cause unexpected duplicate declarations.

To fix this, refactor your component structure: move shared components to a separate file that doesn't import back to the parent component.

4. Update Ant Design and build tools #

Outdated versions of Ant Design or your build tools (Webpack, Babel) might have bugs that lead to this issue. Try updating to the latest stable versions:

• Run npm update antd to refresh your Ant Design installation.
• If you're using babel-plugin-import for tree-shaking, make sure it's up to date—misconfigured or old versions can cause import conflicts.

5. Verify your Babel/ESLint setup #

While less likely, incorrect Babel presets (like missing @babel/preset-react) or ESLint rules might be causing false positives or handling variables incorrectly. Double-check your configuration files to ensure they're set up for React projects.

Example of a fixed Spinner.js #

If you just need to use Ant Design's Icon with the Spin component, here's a clean version:

// Spinner.js
import { Spin, Icon } from 'antd';

export const FullSpinner = () => (
  <Spin indicator={<Icon type="loading" style={{ fontSize: 24 }} spin />} />
);

Content of the question originates from Stack Exchange, question author Anh Pham