ReferenceError: document is not defined エラー解消　※buildもできるようになった

h-yabi2 · Jul 20, 2024 · fbf03ab · fbf03ab
1 parent ef8d4ff
commit fbf03ab
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 54 deletions.
diff --git a/app/components/Component02.tsx b/app/components/Component02.tsx
@@ -1,51 +1,67 @@
 "use client";
 
-import React, { useMemo, useRef } from "react";
-import ReactQuill, { Quill } from "react-quill";
-import "react-quill/dist/quill.snow.css";
+import React, { useMemo, useRef, LegacyRef } from "react";
+import dynamic from "next/dynamic";
+import type ReactQuill from "react-quill";
+// import { Quill } from "react-quill";
+const ReactQuillBase = dynamic(
+  async () => {
+    const { default: RQ } = await import("react-quill");
 
-const Component02: React.FC = () => {
-  // コンポーネントのref ------------------------
-  // ReactQuillコンポーネントのref
-  const quillRef = useRef<ReactQuill>(null);
-  // ↑ 普通のJavaScriptでいう、new Quill() のようなものです。
-  // ReactQuillコンポーネントから、quillを引っ張り出して参照して使います。
+    function QuillJS({ forwardedRef, ...props }: IWrappedComponent) {
+      const Quill = RQ.Quill; // ReactQuillからQuillを取得
+      const BlockEmbed = Quill.import("blots/embed"); // ここで "blots/embed" をインポート
+      // ImgBlotに渡すデータの型定義
+      interface FileBlotProps {
+        src: string;
+        name: string;
+      }
+      // BlockEmbedを継承して、画像のブロックを作成
+      class ImgBlot extends BlockEmbed {
+        // 出力したいHTMLエレメントの生成
+        static create(data: FileBlotProps): any {
+          const node = super.create();
+          node.setAttribute("data-name", data.name); // ↓のvalueと対応している
+          node.src = data.src; // ↓のvalueと対応している
+          node.alt = "画像";
+          console.log(node);
+          return node;
+        }
 
-  // カスタムBlotの作成 ------------------------
-  // blots/embed をインポートして定数に代入
-  const BlockEmbed = Quill.import("blots/embed");
-  // ImgBlotに渡すデータの型定義
-  interface FileBlotProps {
-    src: string;
-    name: string;
-  }
-  // BlockEmbedを継承して、画像のブロックを作成
-  class ImgBlot extends BlockEmbed {
-    // 出力したいHTMLエレメントの生成
-    static create(data: FileBlotProps): any {
-      const node = super.create();
-      node.setAttribute("data-name", data.name); // ↓のvalueと対応している
-      node.src = data.src; // ↓のvalueと対応している
-      node.alt = "画像";
-      console.log(node);
-      return node;
-    }
+        // 渡すデータの定義(HTML属性から抽出)
+        static value(domNode: HTMLIFrameElement): any {
+          return {
+            // ここで定義したデータは、↑のcreateで、必ず同じAttributeにセットするようにしてください。
+            name: domNode.getAttribute("data-name"),
+            src: domNode.getAttribute("src"),
+          };
+        }
+      }
+      // Quillに入るタグを定義します。今回はimgタグを入れます。場合によってはdivなど使います。
+      ImgBlot.tagName = "img";
+      // 作成したBlotの登録
+      ImgBlot.blotName = "img_blot"; // blotの名前≒IDです。既存のBlot(Quill標準のもの＋先にカスタムで作ったもの)と重複しないように命名します。
+      ImgBlot.className = "nodoCollectionImg"; // 出力されるHTMLタグにつけるクラス名です。「このHTMLタグはどのblotなのか」を判別するのにも利用されるので、他と重複しないクラス名をつけます。
+      Quill.register(ImgBlot, true); // Quillに登録します。これをやっておかないと、QuillがImgBlotを認識してくれません。
+      // ここで ImgBlot を定義し、Quill に登録します
+      // ... ImgBlot の定義と登録 ...
 
-    // 渡すデータの定義(HTML属性から抽出)
-    static value(domNode: HTMLIFrameElement): any {
-      return {
-        // ここで定義したデータは、↑のcreateで、必ず同じAttributeにセットするようにしてください。
-        name: domNode.getAttribute("data-name"),
-        src: domNode.getAttribute("src"),
-      };
+      return <RQ ref={forwardedRef} {...props} />;
     }
+    return QuillJS;
+  },
+  {
+    ssr: false,
   }
-  // Quillに入るタグを定義します。今回はimgタグを入れます。場合によってはdivなど使います。
-  ImgBlot.tagName = "img";
-  // 作成したBlotの登録
-  ImgBlot.blotName = "img_blot"; // blotの名前≒IDです。既存のBlot(Quill標準のもの＋先にカスタムで作ったもの)と重複しないように命名します。
-  ImgBlot.className = "nodoCollectionImg"; // 出力されるHTMLタグにつけるクラス名です。「このHTMLタグはどのblotなのか」を判別するのにも利用されるので、他と重複しないクラス名をつけます。
-  Quill.register(ImgBlot, true); // Quillに登録します。これをやっておかないと、QuillがImgBlotを認識してくれません。
+);
+import "react-quill/dist/quill.snow.css";
+
+interface IWrappedComponent extends React.ComponentProps<typeof ReactQuill> {
+  forwardedRef: LegacyRef<ReactQuill>;
+}
+
+const Component02: React.FC = () => {
+  const quillRef = useRef<ReactQuill>(null);
 
   // 画像の選択肢 ----------------
   const imgSelectList = useMemo(() => {
@@ -144,8 +160,8 @@ const Component02: React.FC = () => {
           ニュース
         </button>
       </div>
-      <ReactQuill
-        ref={quillRef} // ReactQuillコンポーネントのrefをセット
+      <ReactQuillBase
+        forwardedRef={quillRef} // ReactQuillコンポーネントのrefをセット
         modules={modules}
         placeholder="ここにテキストを入力..."
       />

diff --git a/app/components/Component04.tsx b/app/components/Component04.tsx
@@ -36,7 +36,7 @@ import { useQuillRef } from "@/context/QuillRefContext";
 
 const Component03: React.FC = () => {
   const quillRef = useRef<ReactQuill>(null);
-  const { quillRefContext, setQuillRef } = useQuillRef();
+  const { ref, setQuillRef } = useQuillRef();
   const [data, setData] = useState(collectionDetail.body);
 
   const BlockEmbed = Quill.import("blots/embed");

diff --git a/app/page.tsx b/app/page.tsx
@@ -1,6 +1,6 @@
 import { QuillRefProvider } from "../context/QuillRefContext";
 // import MyComponent from "@/app/components/MyComponent";
-// import Component02 from "./components/Component02";
+import Component02 from "./components/Component02";
 // import Component03 from "./components/Component03";
 import Component04 from "./components/Component04";
 import Component05 from "./components/Component05";
@@ -12,9 +12,9 @@ export default function Home() {
     <QuillRefProvider>
       <main className="">
         {/* <MyComponent /> */}
-        {/* <Component02 /> */}
+        <Component02 />
         {/* <Component03 /> */}
-        <Component04 />
+        {/* <Component04 /> */}
         {/* <Component05 /> */}
         {/* <Component06 /> */}
         {/* <Component07 /> */}

diff --git a/context/QuillRefContext.tsx b/context/QuillRefContext.tsx
@@ -12,7 +12,6 @@ import ReactQuill from "react-quill";
 
 // Contextの型定義
 interface QuillRefContextType {
-  quillRefContext: React.RefObject<ReactQuill>;
   ref: ReactQuill | null;
   setQuillRef: (ref: ReactQuill) => void;
 }
@@ -26,19 +25,14 @@ const QuillRefContext = createContext<QuillRefContextType | undefined>(
 export const QuillRefProvider: React.FC<{ children: React.ReactNode }> = ({
   children,
 }) => {
-  const quillRefContext = useRef<ReactQuill>(null);
   const [ref, setRef] = useState<ReactQuill | null>(null);
 
   const setQuillRef = useCallback((ref: ReactQuill) => {
     setRef(ref);
   }, []);
 
-  //   useEffect(() => {
-  //     console.log("quillRefContext updated:", quillRefContext.current);
-  //   }, [quillRefContext.current]);
-
   return (
-    <QuillRefContext.Provider value={{ quillRefContext, ref, setQuillRef }}>
+    <QuillRefContext.Provider value={{ ref, setQuillRef }}>
       {children}
     </QuillRefContext.Provider>
   );