模块构建失败：重复声明

Question

我正在为我的 React 项目使用 Ant Design Framework。但是在导入组件时，即使我之前没有声明过这些组件，它也会报错。

错误：

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

您已多次导入 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} />

从 Spinner.js

中删除 import { Spin, Icon } from 'antd'; 后尝试

Answer 2

您的 Spinner.js 文件从 antd 模块导入 Spin 和 Icon 两次。您可以安全地删除其中一行。

// 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} />

模块构建失败：重复声明

Module build failed: Duplicate declaration

javascript

reactjs

antd