After updating to the latest verion of react-draft-wysiwyg 1.14.4 [ReferenceError: window is not defined]

[nikitaChauhan004]

ReferenceError: window is not defined
at Object. (D:\project\node_modules\react-draft-wysiwyg\dist\react-draft-wysiwyg.js:1:393)
at Module._compile (internal/modules/cjs/loader.js:955:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10)
at Module.load (internal/modules/cjs/loader.js:811:32)
at Function.Module._load (internal/modules/cjs/loader.js:723:14)
at Module.require (internal/modules/cjs/loader.js:848:19)
at require (internal/modules/cjs/helpers.js:74:18)
at Object.react-draft-wysiwyg (D:\project.next\server\static\development\pages\plans.js:23614:18)
at webpack_require (D:\project.next\server\static\development\pages\plans.js:23:31)
at Module../client/components/containers/ModernScriptEditor/MseRichTextEditor.jsx (D:\project.next\server\static\development\pages\plans.js:4346:78)
at webpack_require (D:\project.next\server\static\development\pages\plans.js:23:31)
at Module../client/components/containers/ModernScriptEditor/ModernScriptEditor.jsx (D:\project.next\server\static\development\pages\plans.js:1103:77)
at webpack_require (D:\project.next\server\static\development\pages\plans.js:23:31)
at Module../client/components/containers/TestCases/TestCasesPage.jsx (D:\project.next\server\static\development\pages\plans.js:8173:96)
at webpack_require (D:\project.next\server\static\development\pages\plans.js:23:31)
at Module../client/components/containers/Plan/PlanDetail.jsx (D:\project.next\server\static\development\pages\plans.js:5322:83)
at webpack_require (D:\project.next\server\static\development\pages\plans.js:23:31)
at Module../client/components/containers/Plan/Plan.jsx (D:\project.next\server\static\development\pages\plans.js:4953:70)
at webpack_require (D:\project.next\server\static\development\pages\plans.js:23:31)
at Module../pages/plans.js (D:\project.next\server\static\development\pages\plans.js:22720:97)
at webpack_require (D:\project.next\server\static\development\pages\plans.js:23:31)
at Object.3 (D:\project.next\server\static\development\pages\plans.js:22810:18)

[EricWVGG]

I'm also seeing this issue. The project uses SSR, if that makes any difference.

[anthony0030]

This is the workaround I am using, the only problem is that external links aren't working

import React, { Component } from "react";
import PropTypes from "prop-types";
import { convertFromRaw, EditorState } from "draft-js";
import { stateToHTML } from "draft-js-export-html";
import { stateFromHTML } from "draft-js-import-html";
import Input from "components/Input/Input";
let Editor = () => <></>;

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

  convertCommentFromJSONToHTML = text => {
    return stateToHTML(convertFromRaw(JSON.parse(text)));
  };

  onChange = editorState => this.setState({ editorState });

  componentDidMount = () => {
    Editor = require("react-draft-wysiwyg").Editor;
    let contentState = stateFromHTML(this.props.content);
    this.setState({
      editorState: EditorState.createWithContent(contentState)
    });
  };

  render() {
    const { name } = this.props;
    const { editorState } = this.state;

    return (
      <>
        <Editor
          editorState={editorState}
          wrapperClassName="border rounded"
          editorClassName="p-3 bg-white"
          toolbarClassName="mb-0 p-3"
          onEditorStateChange={this.onChange}
        />

        <Input
          value={stateToHTML(editorState.getCurrentContent())}
          name={name}
          type={"text"}
          // className="d-none"
        />
      </>
    );
  }
}

WYSIWYG.propTypes = {
  name: PropTypes.string.isRequired,
  content: PropTypes.string
};

export default WYSIWYG;

[jseanpatel]

Found a simpler, ES6 workaround with basic React Hooks while working in Gatsby.

First create this Editor:
let Editor = () => <></>;

Then add a useState and useEffect hook so that on page load you have a state change.
const [editorState, setEditorState] = useState();
useEffect(() => { Editor = require("react-draft-wysiwyg").Editor; setEditorState(true) },[]);

Then conditionally render wherever you use the Editor component. Here's an example:
{editorState && <Editor toolbarClassName="toolbarClassName" wrapperClassName="wrapperClassName" editorClassName="editorClassName" /> }

Hope this helps!

[nuclearspike]

I am also experiencing this issue with a SSR app. My workaround is to just keep it at 1.13.2 until it's resolved.

[betancourtl]

thx for the comments , I will probably bump down to 1.13.2

[betancourtl]

This seemed to work

import React, { Component } from 'react';
import { EditorState, convertToRaw } from 'draft-js';
import draftToHtml from 'draftjs-to-html';
let Editor = () => null;

class EditorConvertToHTML extends Component {
  state = {
    ready: false,
    editorState: EditorState.createEmpty(),
  }

  componentDidMount() {
    import('react-draft-wysiwyg').then(({ Editor: WSYSIGEditor }) => {
      Editor = WSYSIGEditor;
      this.setState({ ready: true });
    });
  }

  onEditorStateChange = (editorState) => {
    this.setState({
      editorState,
    });
  };

  render() {
    const { editorState } = this.state;
    return (
      <div>
        <Editor
          editorState={editorState}
          wrapperClassName="demo-wrapper"
          editorClassName="demo-editor"
          onEditorStateChange={this.onEditorStateChange}
        />
        <textarea
          disabled
          value={draftToHtml(convertToRaw(editorState.getCurrentContent()))}
        />
      </div>
    );
  }
}

export default EditorConvertToHTML;

[dvargas92495]

I created a forked version of the npm package, for anyone interested in the Webpack fix from the linked PR above. Think it's working for my use case now

https://www.npmjs.com/package/@dvargas92495/react-draft-wysiwyg

[nfantone]

Same here. 1.14.4 does not work out-of-the-box with Next.js. @dvargas92495 package doesn't seem to resolve the SSR issue for me either.

EDIT: If you are working with Next.js, a viable workaround until this is resolved is to load the component dynamically using next/dynamic. Note that some plugins, like draftjs-to-markdown, suffer from the same symptoms - so you should wrap them, as well.

const Editor = dynamic(() => import('react-draft-wysiwyg').then(({ Editor }) => Editor), {
  ssr: false
});
const draftToMarkdown = dynamic(() => import('draftjs-to-markdown'), { ssr: false });

[zackiieonebbad]

Hi

…

On Sun, 25 Jul 2021, 11:13 pm ridhosatriawan, ***@***.***> wrote: this work for me — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#920 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ASPDIJLXQKRJU7PORQ6D35LTZTHEHANCNFSM4KHOHC2Q> .