模块构建失败：重复声明 "Editor"

Question

我正在尝试在我的项目中实施 Facebook 提供的 "RichEditor" 示例代码如下：

import React from 'react;
import { Component } from 'react';
import { Editor, EditorState, RichUtils } from 'draft-js';
import { Map } from 'immutable';

'use strict';

const { Editor, EditorState, RichUtils } = Draft;

//rest of the code...

每当我尝试使用 webpack-dev-server 构建时，我都会收到以下错误。我检查了 Whosebug 以查看其他用户是否遇到了确切的错误。但是，找不到一个。

Module Build Failed: Duplicate Declaration "Editor"

'use strict';
> const { Editor, EditorState, RichUtils } = Draft;

export class ...{}

我哪里错了？

注意：我是 ReactJS 的新手。

Answer 1

你在上面导入 Editor，然后在解构 Draft 时你也在重新定义它。

您需要在 draft-js 的导入中为 Editor 添加别名，如下所示：

import { Editor as DEditor, EditorState, RichUtils } from 'draft-js';

从这里开始，您将使用 Deditor 而不是 Editor。然后你可以在下面自由命名 const Editor...

或者，不要解构下面的 Draft 对象。

而不是 const { Editor, EditorState, RichUtils } = Draft;，使用点语法访问 Draft 的属性。即 Draft.Editor、Draft.EditorState 等...

Answer 2

如果您正在导入与导入中其他地方的组件同名的预定义默认导入，也会发生此重复声明错误。

示例：

import bla from 'react-bla';
://more imports
://more imports
import bla from '../Components/bla/bla';

模块构建失败：重复声明 "Editor"

Module Build Failed: Duplicate Declaration "Editor"

reactjs

semantic-ui

webpack

webpack-dev-server

draftjs