模块构建失败:重复声明“编辑器”

时间:2017-01-24 05:33:44

标签: reactjs webpack semantic-ui webpack-dev-server draftjs

我正在尝试在我的项目中实现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进行构建时,我都会收到以下错误消息。我检查了StackOverflow以查看是否有其他用户遇到了确切的错误。但是,找不到一个。

Module Build Failed: Duplicate Declaration "Editor"

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

export class ...{}

我哪里错了?

注意:我是ReactJS的新手。

2 个答案:

答案 0 :(得分:5)

您最后导入Editor,然后在解构Draft时再次定义它。

您需要在Editor的导入中使用别名draft-js,如下所示:

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

从这里开始,您将使用Deditor代替Editor。然后你可以自由命名下面的Editor ......

或者,不要破坏下面的Draft对象。

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

答案 1 :(得分:0)

如果要导入与导入中其他位置的组件同名的预定义默认导入,也会发生此重复声明错误。

示例:

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