import react-dnd only from client components

apps/app/package.json

@@ -165,8 +165,6 @@
     "react-card-flip": "^1.0.10",
     "react-datepicker": "^4.7.0",
     "react-disable": "^0.1.1",
-    "react-dnd": "^14.0.5",
-    "react-dnd-html5-backend": "^14.1.0",
     "react-dom": "^18.2.0",
     "react-error-boundary": "^3.1.4",
     "react-i18next": "^14.1.0",
@@ -271,6 +269,8 @@
     "pretty-bytes": "^6.1.1",
     "react-codemirror2": "^6.0.0",
     "react-copy-to-clipboard": "^5.0.1",
+    "react-dnd": "^14.0.5",
+    "react-dnd-html5-backend": "^14.1.0",
     "react-dropzone": "^14.2.3",
     "react-hotkeys": "^2.0.0",
     "react-input-autosize": "^3.0.0",

apps/app/src/components-universal/Layout/BasicLayout.tsx

@@ -2,8 +2,6 @@ import type { ReactNode } from 'react';
 import React from 'react';
 
 import dynamic from 'next/dynamic';
-import { DndProvider } from 'react-dnd';
-import { HTML5Backend } from 'react-dnd-html5-backend';
 
 import { Sidebar } from '~/components/Sidebar';
 
@@ -47,31 +45,28 @@ type Props = {
 export const BasicLayout = ({ children, className }: Props): JSX.Element => {
   return (
     <RawLayout className={`${moduleClass} ${className ?? ''}`}>
-      <DndProvider backend={HTML5Backend}>
-
-        <div className="page-wrapper flex-row">
-          <div className="z-2">
-            <Sidebar />
-          </div>
-
-          <div className="d-flex flex-grow-1 flex-column mw-0 z-1">{/* neccessary for nested {children} make expanded */}
-            <AlertSiteUrlUndefined />
-            {children}
-          </div>
+      <div className="page-wrapper flex-row">
+        <div className="z-2">
+          <Sidebar />
         </div>
 
-        <GrowiNavbarBottom />
-
-        <PageCreateModal />
-        <PageDuplicateModal />
-        <PageDeleteModal />
-        <PageRenameModal />
-        <PageAccessoriesModal />
-        <DeleteAttachmentModal />
-        <DeleteBookmarkFolderModal />
-        <PutbackPageModal />
-        <SearchModal />
-      </DndProvider>
+        <div className="d-flex flex-grow-1 flex-column mw-0 z-1">{/* neccessary for nested {children} make expanded */}
+          <AlertSiteUrlUndefined />
+          {children}
+        </div>
+      </div>
+
+      <GrowiNavbarBottom />
+
+      <PageCreateModal />
+      <PageDuplicateModal />
+      <PageDeleteModal />
+      <PageRenameModal />
+      <PageAccessoriesModal />
+      <DeleteAttachmentModal />
+      <DeleteBookmarkFolderModal />
+      <PutbackPageModal />
+      <SearchModal />
 
       <PagePresentationModal />
       <HotkeysManager />

apps/app/src/components/Bookmarks/BookmarkFolderTree.tsx

@@ -4,6 +4,8 @@ import React, { useCallback } from 'react';
 import type { IPageToDeleteWithMeta } from '@growi/core';
 import { useTranslation } from 'next-i18next';
 import { useRouter } from 'next/router';
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
 
 import { toastSuccess } from '~/client/util/toastr';
 import type { OnDeletedFunction } from '~/interfaces/ui';
@@ -102,54 +104,58 @@ export const BookmarkFolderTree: React.FC<Props> = (props: Props) => {
   // };
 
   return (
-    <div className={`grw-folder-tree-container ${styles['grw-folder-tree-container']}`}>
-      <ul className={`grw-foldertree ${styles['grw-foldertree']} list-group py-2`}>
-        {bookmarkFolders?.map((bookmarkFolder) => {
-          return (
-            <BookmarkFolderItem
-              key={bookmarkFolder._id}
-              isReadOnlyUser={!!isReadOnlyUser}
-              isOperable={props.isOperable}
-              bookmarkFolder={bookmarkFolder}
-              isOpen={false}
-              level={0}
-              root={bookmarkFolder._id}
-              isUserHomepage={isUserHomepage}
-              onClickDeleteMenuItemHandler={onClickDeleteMenuItemHandler}
-              bookmarkFolderTreeMutation={bookmarkFolderTreeMutation}
-            />
-          );
-        })}
-        {userBookmarks?.map(userBookmark => (
-          <div key={userBookmark?._id} className="grw-foldertree-item-container grw-root-bookmarks">
-            <BookmarkItem
-              isReadOnlyUser={!!isReadOnlyUser}
-              isOperable={props.isOperable}
-              bookmarkedPage={userBookmark}
-              level={0}
-              parentFolder={null}
-              canMoveToRoot={false}
-              onClickDeleteMenuItemHandler={onClickDeleteMenuItemHandler}
-              bookmarkFolderTreeMutation={bookmarkFolderTreeMutation}
-            />
-          </div>
-        ))}
-      </ul>
-      {/* TODO: update in bookmarks folder v2. Also delete drop_item_here in translation.json, if don't need it. */}
-      {/* {bookmarkFolderData != null && bookmarkFolderData.length > 0 && (
-        <DragAndDropWrapper
-          useDropMode={true}
-          type={acceptedTypes}
-          onDropItem={itemDropHandler}
-          isDropable={isDroppable}
-        >
-          <div className="grw-drop-item-area">
-            <div className="d-flex flex-column align-items-center">
-              {t('bookmark_folder.drop_item_here')}
+    <DndProvider backend={HTML5Backend}>
+
+      <div className={`grw-folder-tree-container ${styles['grw-folder-tree-container']}`}>
+        <ul className={`grw-foldertree ${styles['grw-foldertree']} list-group py-2`}>
+          {bookmarkFolders?.map((bookmarkFolder) => {
+            return (
+              <BookmarkFolderItem
+                key={bookmarkFolder._id}
+                isReadOnlyUser={!!isReadOnlyUser}
+                isOperable={props.isOperable}
+                bookmarkFolder={bookmarkFolder}
+                isOpen={false}
+                level={0}
+                root={bookmarkFolder._id}
+                isUserHomepage={isUserHomepage}
+                onClickDeleteMenuItemHandler={onClickDeleteMenuItemHandler}
+                bookmarkFolderTreeMutation={bookmarkFolderTreeMutation}
+              />
+            );
+          })}
+          {userBookmarks?.map(userBookmark => (
+            <div key={userBookmark?._id} className="grw-foldertree-item-container grw-root-bookmarks">
+              <BookmarkItem
+                isReadOnlyUser={!!isReadOnlyUser}
+                isOperable={props.isOperable}
+                bookmarkedPage={userBookmark}
+                level={0}
+                parentFolder={null}
+                canMoveToRoot={false}
+                onClickDeleteMenuItemHandler={onClickDeleteMenuItemHandler}
+                bookmarkFolderTreeMutation={bookmarkFolderTreeMutation}
+              />
             </div>
-          </div>
-        </DragAndDropWrapper>
-      )} */}
-    </div>
+          ))}
+        </ul>
+        {/* TODO: update in bookmarks folder v2. Also delete drop_item_here in translation.json, if don't need it. */}
+        {/* {bookmarkFolderData != null && bookmarkFolderData.length > 0 && (
+          <DragAndDropWrapper
+            useDropMode={true}
+            type={acceptedTypes}
+            onDropItem={itemDropHandler}
+            isDropable={isDroppable}
+          >
+            <div className="grw-drop-item-area">
+              <div className="d-flex flex-column align-items-center">
+                {t('bookmark_folder.drop_item_here')}
+              </div>
+            </div>
+          </DragAndDropWrapper>
+        )} */}
+      </div>
+
+    </DndProvider>
   );
 };

apps/app/src/components/Sidebar/PageTree/PageTree.tsx

@@ -1,6 +1,8 @@
 import { Suspense, useState } from 'react';
 
 import dynamic from 'next/dynamic';
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
 import { useTranslation } from 'react-i18next';
 
 import ItemsTreeContentSkeleton from '../../ItemsTree/ItemsTreeContentSkeleton';
@@ -31,7 +33,9 @@ export const PageTree = (): JSX.Element => {
       </div>
 
       <Suspense fallback={<ItemsTreeContentSkeleton />}>
-        <PageTreeContent isWipPageShown={isWipPageShown} />
+        <DndProvider backend={HTML5Backend}>
+          <PageTreeContent isWipPageShown={isWipPageShown} />
+        </DndProvider>
       </Suspense>
     </div>
   );