React Draft wysiwyg won't load css styles

Question

I am developing a React Library created with create-react-library. Works well and now I want to implement a html text editor. I chose react-draft-wysiwyg for this. I encountered 2 problems:

1. Adding Editor and EditorState to my component:

   import {Editor} from 'react-draft-wysiwyg'; import {EditorState} from 'draft-js';

Rollup couldn't resolve the necessary Editor and EditorState classes. It was giving the error 'name-is-not-exported-by-module'. After searching and trying, I resolved this problem by adding these lines to rollup.config.js:

commonjs({
        namedExports: {
            'node_modules/draft-js/lib/Draft.js': [ 'EditorState' ],
            'react-draft-wysiwyg': [ 'Editor' ]

        }
    }),

Now the editor shows up.

2. Loading css

import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';

Styles won't load either but this time, no warning is shown in the console, they just don't load.

Any Idea how to fix this?

Answer 1

Are you seeing something like this? Can you try this and see, import '../node_modules/react-draft-wysiwyg/dist/react-draft-wysiwyg.css';

I am using the same editor, but never faced any of the above issues. Are you sure it is installed correctly? Because the first issue you faced looks like that.