React-draft-wysiwyg: Having issues with loading css

[FrenchBully]

component does not render css even after import. Using postcss, just wondering if you have any suggestions to get css to import correctly?

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

<Editor
       editorState={editorState}
       wrapperClassName="home-wrapper"
       editorClassName="home-editor"
       toolbarClassName="toolbar-class"
       onEditorStateChange={this.onEditorStateChange}
       placeholder="Begin typing..."
       hashtag={{}}
/>

[jpuri]

Try like this https://github.com/jpuri/react-draft-wysiwyg/blob/master/docs/src/index.js#L15

[FrenchBully]

Thank you for the quick response, but still no luck. The image below is what I'm seeing. The wysiwyg works so I know js is loading fine.

[FrenchBully]

getting 404 /react-draft-wysiwyg.css.map

[FrenchBully]

Any other thoughts that might be the root cause?

[jpuri]

Hey @FrenchBully , I am not able to see image above :(

This might be build issue in bundling css in your project, the lib has many users and it works well. A work around could be that you copy the css content of wysiwyg to a local file in your project.

If you can share more details about your project and build - that will help me know exact cause.

[FrenchBully]

I'm using postcss in build, would that have any issues?

Here's the screenshot

[FrenchBully]

I'm able to get the style if I manually copy them over to an local .css file and import into my main.css file.

[natashache]

I'm having the same problem.

[FrenchBully]

@natashache I ended up just moving the css out of the plugin and added to my project.

[natashache]

@FrenchBully thanks. Yeah, I'm doing the same.

[jpuri]

Hi @FrenchBully , @natashache : with suitable builf configurations I expect the import from node-Modules to already work.

[FrenchBully]

@jpuri yea, not entirely sure what the root cause of why I couldn't import from the module. I'll circle back to it when I have a moment.

[astroboogie]

@FrenchBully @natashache @jpuri I'm still encountering the same problem. I've tried all the solutions here but have yet to see an outcome besides something similar to the picture FrenchBully posted earlier.

I'm using react-starter-kit which includes withStyles from isomorphic-style-loader. Here's my current component that contains react-draft-wysiwyg:

import React from 'react';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import { EditorState } from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
import s from './Layout.css';

class Layout extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      editorState: EditorState.createEmpty(),
    };

    this.onEditorStateChange = this.onEditorStateChange.bind(this);
  }

  onEditorStateChange(editorState) {
    this.setState({ editorState });
  }

  render() {
    return (
      <div>
        <Editor
          editorState={this.state.editorState}
          wrapperClassName={s.root}
          editorClassName={s.editor}
          onEditorStateChange={this.onEditorStateChange}
        />
      </div>
    );
  }
}

export default withStyles(s)(Layout);

[jpuri]

@AstroBoogie : does it works for you if you copy css into your project ?

[astroboogie]

@jpuri I've tried copying the css but it still doesn't work. My guess is that for some reason, all the css is getting hashed by css-loader somehow. Below are the loaders in my webpack.config.js.

Here's a StackOverflow post with additional information about what I've tried, but I've still yet to find a solution using react-starter-kit. Thank you for your help!

[jpuri]

You need to change ur webpack configs for that, you can refer this: https://github.com/jpuri/react-draft-wysiwyg/blob/master/docs/config/webpack.dev.config.js#L26

[natashache]

I included react-draft-wysiwyg.css in my local css files and got the editor mostly working. But I'm seeing this error in the console:

In addition, the 'indent' and 'outdent' buttons do not work. They simply do nothing when you click on them, with no errors thrown.

I wonder if this has anything to do with my webpack configs, which is the following:

module.exports = {
  context: __dirname,
  node: {
    fs: 'empty',
    net: 'empty',
    tls: 'empty'
  },
  entry: [
    'babel-polyfill',
    './client/index.js'
  ],
  output: {
    path: path.resolve(__dirname, 'client/'),
    publicPath: '/',
    filename: 'bundle.js',
    devtoolModuleFilenameTemplate: '[absolute-resource-path]',
  },
  module: {
      loaders: [
          {
              test: /\.json$/,
              loader: 'json-loader'
          },
          {
              exclude: /node_modules/,
              loader: 'babel',
              query: {
                  presets: ['react', 'es2015', 'stage-1']
              }
          },
          {
              test: /\.(jpg|png)$/,
              loader: 'url-loader?mimetype=image/png'
          },
          {
            test: /\.css$/,
            exclude: /Draft\.css$/,
            loaders: [
              'style-loader',
              'css-loader?modules'
            ]
          },
          {
            test: /Draft\.css$/,
            loader: 'style-loader!css-loader',
          },
      ]
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  devServer: {
    historyApiFallback: true,
    contentBase: './client'
  },
  plugins: [
    new webpack.SourceMapDevToolPlugin({
       filename: '[file].map',
    }),
    new webpack.optimize.UglifyJsPlugin(),
    new webpack.DefinePlugin({
       'process.env': {
         NODE_ENV: JSON.stringify('production'),
       },
     }),
  ],
};

The react-draft-wysiwyg.css file is located in the ./client/css/ folder.

@jpuri Could you please help?

[jpuri]

@natashache: try to copy this file also react-draft-wysiwyg.css.map or remove its reference from react-draft-wysiwyg.css.

[natashache]

@jpuri Thanks. Copied the map file and the warning is no longer showing. But the 'indent' and 'outdent' buttons still don't work. Any idea why?

[jpuri]

Indent and outdent is only for lists.

[emeidell]

are there other ways to handle the CSS without needing a css-loader? i am not able to use this because of the required css-loader. 😞

[suruchi1102]

Hi jpuri,
I am using react-draft-wysiwyg editor for my react.js application. But i think there is some problem in loading css.I am getting the same output as posted screenshot by @FrenchBully .
could you please help

[jwchang0206]

I use react-starter-kit and was able to find the minimal way to load CSS without modifying webpack configs.

I did yarn add -D style-loader and added below code on the first line of Editor component code.

if (process.env.BROWSER) {
  // eslint-disable-next-line
  require('!style-loader!css-loader!react-draft-wysiwyg/dist/react-draft-wysiwyg.css');
}

Reference: https://github.com/postcss/postcss-import/issues/179

[ahmadxon]

after installing all dependences you just need to import react-draft-wysiwyg.css inside you component like below:

import React, { Component } from 'react';
import { Editor } from 'react-draft-wysiwyg';
import '../node_modules/react-draft-wysiwyg/dist/react-draft-wysiwyg.css';

[curmichris]

Still unable to load css for this component. any other ideas please?

[raihan71]

I'm having the same issue here

[xuliang2019]

For Next.js Project, Below steps may help.
1.Create a /static folder at the same level the /pages folder.

1. In that folder put your .css files
2. In your page components import Head and add a <link /> to your CSS.

import React from 'react';
import Head from 'next/head';

export default () => (
  <div>
    <Head>
      <title>My styled page</title>
      <link href="/static/styles.css" rel="stylesheet" />
    </Head>
    <p className="some-class-name">
      Hello world!
    </p>
  </div>
)

Reference: https://github.com/vercel/next.js/issues/299#issuecomment-263146962