diff --git a/frontend/package.json b/frontend/package.json
index 496dbe9..85d0ab0 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -43,6 +43,14 @@
     "react": ">=18",
     "react-dom": ">=18"
   },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
+  },
   "description": "React File Manager is an open-source, user-friendly component designed to easily manage files and folders within applications. With smooth drag-and-drop functionality, responsive design, and efficient navigation, it simplifies file handling in any React project.",
   "main": "src/index.js",
   "repository": {
diff --git a/frontend/src/FileManager/BreadCrumb/BreadCrumb.jsx b/frontend/src/FileManager/BreadCrumb/BreadCrumb.jsx
index c3883c9..e367d70 100644
--- a/frontend/src/FileManager/BreadCrumb/BreadCrumb.jsx
+++ b/frontend/src/FileManager/BreadCrumb/BreadCrumb.jsx
@@ -120,4 +120,6 @@ const BreadCrumb = () => {
   );
 };
 
+BreadCrumb.displayName = "BreadCrumb";
+
 export default BreadCrumb;
diff --git a/frontend/src/FileManager/FileList/FileList.jsx b/frontend/src/FileManager/FileList/FileList.jsx
index 15d4509..bb2bc33 100644
--- a/frontend/src/FileManager/FileList/FileList.jsx
+++ b/frontend/src/FileManager/FileList/FileList.jsx
@@ -80,4 +80,6 @@ const FileList = ({
   );
 };
 
+FileList.displayName = "FileList";
+
 export default FileList;
diff --git a/frontend/src/FileManager/NavigationPane/NavigationPane.jsx b/frontend/src/FileManager/NavigationPane/NavigationPane.jsx
index 04cb575..129c650 100644
--- a/frontend/src/FileManager/NavigationPane/NavigationPane.jsx
+++ b/frontend/src/FileManager/NavigationPane/NavigationPane.jsx
@@ -46,4 +46,6 @@ const NavigationPane = () => {
   );
 };
 
+NavigationPane.displayName = "NavigationPane";
+
 export default NavigationPane;
diff --git a/frontend/src/FileManager/Toolbar/Toolbar.jsx b/frontend/src/FileManager/Toolbar/Toolbar.jsx
index b3e5971..2a12484 100644
--- a/frontend/src/FileManager/Toolbar/Toolbar.jsx
+++ b/frontend/src/FileManager/Toolbar/Toolbar.jsx
@@ -175,4 +175,6 @@ const Toolbar = ({
   );
 };
 
+Toolbar.displayName = "Toolbar";
+
 export default Toolbar;
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index d1ee80b..8d4e3b0 100644
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -14,14 +14,7 @@ export default defineConfig({
       formats: ["es"],
     },
     rollupOptions: {
-      external: [
-        ...Object.keys(packageJson.dependencies).map(
-          (mod) => new RegExp(`^${mod}`)
-        ),
-        ...Object.keys(packageJson.peerDependencies).map(
-          (mod) => new RegExp(`^${mod}`)
-        ),
-      ],
+      external: ["react", "react-dom"],
       output: {
         globals: {
           react: "React",