

下記のページを参考に、Next.jsでreact-draft-wysiwygを導入しようと考えています。

[ブラウザ上で動くリッチなテキストエディタを、React Draft
Wysiwygを使って手軽に実装する](https://harionote.net/2022/01/07/%E3%80%90react-draft-
wysiwyg%E3%80%91%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E4%B8%8A%E3%81%A7%E5%8B%95%E3%81%8F%E3%83%AA%E3%83%83%E3%83%81%E3%81%AA%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%82%A8%E3%83%87/)

### 実現したいこと

react-draft-wysiwygを動かして、入力内容を `const [editorState, setEditorState] =
useState("");` で受け取りたい

### 発生している問題・エラーメッセージ

エラーではないですが、なぜか  
`const [editorState, setEditorState] = useState("");`  
を記述し、  
`<Editor editorState={editorState} 〜省略〜`

を追加すると、本番環境とローカル環境で記入できなくなります。（vercelで確認できます。）  
このusestateがないと値を受け取れないので、実装したいのですが、原因がまだ分かっていません。  
分かる方がいれば教えて頂きたいです。  
よろしくお願いします。

<https://sample-file.vercel.app/>

github  
<https://github.com/takoyan33/sample-file>

### 該当のソースコード

JavaScript

[code]

    import React, { useCallback, useContext, useEffect, useState } from "react";
    import dynamic from "next/dynamic";
    
    const Editor = dynamic(
      () => import("react-draft-wysiwyg").then((mod) => mod.Editor),
      { ssr: false }
    );
    
    import { ContentState, convertToRaw, EditorState } from "draft-js";
    
    import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
    
    export default function Home() {
      const [editorState, setEditorState] = useState("");
    
      const handleImageUpload = useCallback(async (file) => {
        return await axios
          .post
          // fileをアップロードし、アップロード後の画像のurlを返す処理
          ()
          .then((response) => {
            return { data: { link: response } };
          })
          .catch((error) => {
            return error;
          });
      }, []);
    
      console.log(editorState);
    
      return (
        <div className="container my-5">
          <Editor
            editorState={editorState}
            toolbarClassName="toolbarClassName"
            wrapperClassName="wrapperClassName"
            editorClassName="editorClassName"
            editorStyle={{
              border: "solid 1px lightgray",
              padding: "5px",
            }}
            localization={{ locale: "ja" }}
          />
        </div>
      );
    }
    
[/code]


CC BY-SA 4.0
2022-09-18T10:00:09.357
91157
2022-09-21T02:43:52.590
2022-09-18T11:07:55.913
3060
52921
question
reactjs next.js
Next.jsで上手くreact-draft-wysiwygが動かない
  
  
draft-js のバージョンの問題ではないでしょうか？

react-draft-wysiwyg の公式ドキュメントでは、  
draft-js 0.10.x が必要とかいてありました。

<https://jpuri.github.io/react-draft-wysiwyg/#/docs>


CC BY-SA 4.0
2022-09-21T02:43:52.590
91204
2022-09-21T02:43:52.590
54462
91157
answer