Fix ssr build fail gatsbyjs/gatsby#29326, fix ssr build fail as React Quill use document.

Author: Raymans

package-lock.json

@@ -30,6 +30,7 @@
     "@ant-design/compatible": "^1.0.1",
     "@ant-design/icons": "latest",
     "@auth0/auth0-react": "^1.0.0",
+    "@babel/plugin-transform-spread": "^7.12.1",
     "@fortawesome/fontawesome-svg-core": "^1.2.27",
     "@fortawesome/free-brands-svg-icons": "^5.12.1",
     "@fortawesome/free-solid-svg-icons": "^5.12.1",

package.json

@@ -39,7 +39,7 @@ import AnchorSider from '../Sider/AnchorSider';
 import { Option } from 'antd/lib/mentions';
 import useGetStarted from '../../hooks/useGetStarted';
 import useStore from '../../hooks/useStore';
-import ReactQuill from 'react-quill';
+import { ReactQuill } from '../../utils/ssrHelper';
 import 'react-quill/dist/quill.snow.css';
 import QuillHelpers from '../../utils/QuillHelpers';
 

src/components/Interviews/InterviewForm.js

@@ -8,7 +8,7 @@ import { useAuth0 } from '@auth0/auth0-react';
 import useApi from '../../hooks/useApi';
 import ConfirmModal from '../Organization/ConfirmModal';
 import useGetStarted from '../../hooks/useGetStarted';
-import ReactQuill from 'react-quill';
+import { ReactQuill } from '../../utils/ssrHelper';
 import QuillHelpers from '../../utils/QuillHelpers';
 
 const defaultInterviewSession = {

src/components/Interviews/InterviewSession.js

@@ -21,7 +21,7 @@ import CustomBreadcrumb from '../CustomBreadcrumb';
 import useApi from '../../hooks/useApi';
 import Seo from '../Seo';
 import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
-import ReactQuill from 'react-quill';
+import { ReactQuill } from '../../utils/ssrHelper';
 import QuillHelpers from '../../utils/QuillHelpers';
 
 const FormItem = Form.Item;

src/components/Questions/QuestionForm.js

@@ -10,13 +10,18 @@ let useLocalStorage = () =>
 
 let aos = {};
 
+let ReactQuill = {};
+
 if (isBrowser) {
   import('@rehooks/local-storage').then((module) => {
     useLocalStorage = module;
   });
   import('aos').then((module) => {
     aos = module;
   });
+  import('react-quill').then((module) => {
+    ReactQuill = module;
+  });
 }
 
-export { aos, useLocalStorage };
+export { aos, useLocalStorage, ReactQuill };