Сборка модуля завершилась неудачно: повторное объявление

Question

Я использую Ant Design Framework для своего проекта React. Но при импорте компонентов выдается ошибка, хотя я раньше не объявлял эти компоненты.

ОШИБКА:

Module build failed: Duplicate declaration "Icon"

Вот код:

// App.js

import React from 'react';
import ReactDOM from 'react-dom';
import { FullSpinner } from "./Spinner"

class App extends React.Component {
  render() {
    return (<div>sdkfjsdf</div>)
  }
}

export default App 

// Spinner.js

import { Spin, Icon } from 'antd';

import React from 'react'
import {Icon, Spin} from 'antd';

const antIcon = () => <Icon type="loading" style={{ fontSize: 24 }} spin />;


export const FullSpinner = () => <Spin indicator={antIcon} />

Answer 1

Ваш файл Spinner.js импортирует Spin и Icon дважды из модуля antd. Вы можете безопасно удалить одну из этих строк.

// Spinner.js

import React from 'react'
import {Icon, Spin} from 'antd';

const antIcon = () => <Icon type="loading" style={{ fontSize: 24 }} spin />;


export const FullSpinner = () => <Spin indicator={antIcon} />

Answer 2

Вы импортировали Icon компонент несколько раз.

// Spinner.js

import { Spin, Icon } from 'antd';
import React from 'react'
import {Icon, Spin} from 'antd';  <- Duplicate

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

Попробуйте после удаления import { Spin, Icon } from 'antd'; из Spinner.js