Module Build Failed: Duplicate Declaration "Editor"

Question

I am trying to implement "RichEditor" example provided by Facebook in my project Here is the code:

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...

Whenever I tried to build using webpack-dev-server, I am getting the following error. I checked StackOverflow to see if some other user has encountered an exact error. But, couldn't find one.

Module Build Failed: Duplicate Declaration "Editor"

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

export class ...{}

Where am I going wrong?

Note: I am new to ReactJS.

Answer 1

You're importing Editor up top, and then you are also defining it again when you are destructuring Draft.

You either need to alias Editor in the import of draft-js like this:

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

From here you would use Deditor instead of Editor. Then you would be free to name the const Editor below...

Or, just don't destructure the Draft object below.

Instead of const { Editor, EditorState, RichUtils } = Draft;, access the property of Draft with dot syntax. i.e. Draft.Editor, Draft.EditorState, etc...