React-draft-wysiwyg: SSR window is not defined

[hnaoufal]

Hey guys,

after the update from 1.13.2 to 1.14.0 I get the following error:
ReferenceError: window is not defined

So I assume it doesn't support the building in SSR environments. Can you please check the error and make sure this is fixed? I can also create a pull Request if you like

[jpuri]

@hnaoufal : i will appreciate a PR. Thx

[hnaoufal]

Ok I had a quick look at it. It seems like it is a sub dependency of your library which is causing this issue. I will check maybe the next week what is exactly causing the problem. In the dev mode it works but when compiled it throws the error.

To give you more details:
/node_modules/react-draft-wysiwyg/dist/react-draft-wysiwyg.js:1:393

which points to:
require("draft-js"),require("immutable")):e.reactDraftWysiwyg=t(e.react,e["draft-js"],e.immutable)}(window,function(n,o,r){return c={},i.m=a=[function(e,t,n){e.exports=n(9)()},function(e,t){e.exports=n},function(e,t,n){var o;

This window there is doing the problem. If you have a hint, I could have a look at it but for now I can't plan this in our sprint.

I think for now I will just do dynamic loading of the component to avoid SSR problems.

[hnaoufal]

If someone is facing the same problem use the following example:

import dynamic from 'next/dynamic'; // (if using Next.js or use own dynamic loader)
const Editor = dynamic(() => import('react-draft-wysiwyg').then(mod => mod.Editor)) as Editor;

I think you can close this issue because this is not directly connected to your module.

[vedovato]

Adding my 2 cents in here. Also had to set ssr option to false

const Editor = dynamic(
  () => import('react-draft-wysiwyg').then(mod => mod.Editor),
  { ssr: false }
)

[pradipvadher]

Can you pls tell me where to place this code? @vedovato

[vedovato]

That's the import statement you put at the beginning of file, @pradipvadher.
Use it instead of import Editor from 'react-draft-wysiwyg'

[otuleja]

Thank you, everyone... this worked for me.

[jonathanshell]

Does anyone have a solution for this within Gatsby? It does not have a comparative dynamic functionality...

[devwhatoplay]

Module parse failed: Unexpected token (19:9)
You may need an appropriate loader to handle this file type.
|
| var Editor = dynamic(function () {

return import("react-draft-wysiwyg").then(function (mod) {
| return mod.Editor;
| });`

I applied the code above but still getting this error

[KumarAbhirup]

The above solutions aren't working for me. I get this error: #1005

[akisly]

How do about draftjs-utils? I'm trying get getSelectedBlocksType function with Next Js dynamic import, but this does not work.
const getSelectedBlocksType = dynamic( () => import('draftjs-utils').then((mod) => mod.getSelectedBlocksType), { ssr: false } );

[chfritz]

I think I found a workaround that also enables SSR:

window = (typeof window != 'undefined' ? window : {});
let DraftEditor;
import('react-draft-wysiwyg').then(mod => DraftEditor = mod.Editor);

With that I'm able to do server-side rendering in the usual way:

ReactDOMServer.renderToString(<Editor contentState={myContent} readonly toolbarHidden/>);

[beulahpt]

How to solve this in react-js without next?

[VadSiam]

@beulahpt

How to solve this in react-js without next?

I did it by this way:

const [
    dynamic,
    setDynamic,
  ] = React.useState(null);

React.useEffect(() => {
    const loadDynamic = async () => {
      const x = await import('path/to/your/ComponentWithDraftWYSIWYG');
      setDynamic(() => x.default);
    };
    loadDynamic();
  }, []);

 if (!dynamic) {
  return <div>Loading...</div>
} 

return <ComponentWithDraftWYSIWYG />