Fix: Dynamic Imports of Component

gatsby-node.js

@@ -10,6 +10,9 @@ const slugify = require("./src/utils/slugify");
 const { paginate } = require("gatsby-awesome-pagination");
 const { createFilePath } = require("gatsby-source-filesystem");
 const config = require("./gatsby-config");
+const {
+  componentsData,
+} = require("./src/sections/Projects/Sistent/components/content");
 
 if (process.env.CI === "true") {
   // All process.env.CI conditionals in this file are in place for GitHub Pages, if webhost changes in the future, code may need to be modified or removed.
@@ -723,18 +726,7 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
     }
   });
 
-  const components = [
-    "button",
-    "text-input",
-    "modal",
-    "paper",
-    "popper",
-    "text-field",
-    "link",
-    "container",
-    "button-group",
-    "tooltip",
-  ];
+  const components = componentsData.map((component) => component.src.replace("/", ""));
 
   const createComponentPages = (createPage, components) => {
     const pageTypes = [

src/components/SistentNavigation/index.js

@@ -3,7 +3,7 @@ import { HiOutlineChevronLeft } from "@react-icons/all-files/hi/HiOutlineChevron
 import { Link } from "gatsby";
 import { IoMdClose } from "@react-icons/all-files/io/IoMdClose";
 import { IoIosArrowDropdownCircle } from "@react-icons/all-files/io/IoIosArrowDropdownCircle";
-import { componentsData } from "../../sections/Projects/Sistent/components";
+import { componentsData } from "../../sections/Projects/Sistent/components/content";
 
 import TOCWrapper from "./toc.style";
 import { IoIosArrowDown } from "@react-icons/all-files/io/IoIosArrowDown";

src/sections/Projects/Sistent/components/box/code.js

@@ -53,7 +53,7 @@ const codes = [
 </Box>`,
 ];
 
-export const BoxCode = () => {
+const BoxCode = () => {
   const location = useLocation();
   const { isDark } = useStyledDarkMode();
 
@@ -206,3 +206,5 @@ export const BoxCode = () => {
     </SistentLayout>
   );
 };
+
+export default BoxCode;

src/sections/Projects/Sistent/components/box/guidance.js

@@ -8,7 +8,7 @@ import { SistentLayout } from "../../sistent-layout";
 import TabButton from "../../../../../reusecore/Button";
 import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
 
-export const BoxGuidance = () => {
+const BoxGuidance = () => {
   const location = useLocation();
   const { isDark } = useStyledDarkMode();
 
@@ -177,3 +177,5 @@ export const BoxGuidance = () => {
     </SistentLayout>
   );
 };
+
+export default BoxGuidance;

src/sections/Projects/Sistent/components/content.js

@@ -0,0 +1,100 @@
+const componentsData = [
+  {
+    id: 1,
+    name: "Button",
+    description:
+        "A button is an interactive element that triggers a specific action and also lets users know what will happen next.",
+    url: "/projects/sistent/components/button",
+    src: "/button",
+  },
+  {
+    id: 2,
+    name: "Text Input",
+    description:
+        "A text input is made up of multiple elements that combine to form a component that helps users to read, write, and edit text in an interface.",
+    url: "/projects/sistent/components/text-input",
+    src: "/text-input",
+  },
+  {
+    id: 3,
+    name: "Modal",
+    description:
+        "A text input is made up of multiple elements that combine to form a component that helps users to read, write, and edit text in an interface.",
+    url: "/projects/sistent/components/modal",
+    src: "/modal",
+  },
+  {
+    id: 4,
+    name: "Paper",
+    description:
+        "The Paper component offers an elevated surface with shadow effects, following Material Design’s elevation system.",
+    url: "/projects/sistent/components/paper",
+    src: "/paper",
+  },
+  {
+    id: 5,
+    name: "Popper",
+    description:
+        "A popper is a tooltip that appears when a user interacts with an element.",
+    url: "/projects/sistent/components/popper",
+    src: "/popper",
+  },
+  {
+    id: 6,
+    name: "Text Field",
+    description:
+        "The TextField component is a versatile input field used to capture user input in forms and user interfaces.",
+    url: "/projects/sistent/components/text-field",
+    src: "/text-field",
+  },
+  {
+    id: 7,
+    name: "Link",
+    description:
+        "Links are essential and integral components of an interface. They are primarily used for navigation, guiding users to the next step in a journey or redirecting them to relevant sections or pages.",
+    url: "/projects/sistent/components/link",
+    src: "/link",
+  },
+  {
+    id: 8,
+    name: "Container",
+    description:
+        "Containers align and center content, providing responsive layout options for different screen sizes.",
+    url: "/projects/sistent/components/container",
+    src: "/container",
+  },
+  {
+    id: 9,
+    name: "ButtonGroup",
+    description:
+        "ButtonGroup is a component that groups multiple buttons together.",
+    url: "/projects/sistent/components/button-group",
+    src: "/button-group",
+  },
+  {
+    id: 10,
+    name: "Box",
+    description:
+        "Box is used as a flexible container for layout and styling, allowing quick customization and responsive design adjustments.",
+    url: "/projects/sistent/components/box",
+    src: "/box",
+  },
+  {
+    id: 11,
+    name: "Tooltip",
+    description:
+        "The Tooltip component is a small pop-up box that appears when a user hovers over an element.",
+    url: "/projects/sistent/components/tooltip",
+    src: "/tooltip",
+  },
+  {
+    id: 12,
+    name: "Backdrop",
+    description:
+        "Backdrop component overlays a dimmed screen to focus attention on foreground content.",
+    url: "/projects/sistent/components/backdrop",
+    src: "/backdrop",
+  },
+];
+
+module.exports = { componentsData };

src/sections/Projects/Sistent/components/index.js

@@ -7,93 +7,8 @@ import SearchBox from "../../../../reusecore/Search";
 import useDataList from "../../../../utils/usedataList";
 import { FaArrowRight } from "@react-icons/all-files/fa/FaArrowRight";
 import { Link } from "gatsby";
+import { componentsData } from "./content";
 
-export const componentsData = [
-  {
-    id: 1,
-    name: "Button",
-    description:
-      "A button is an interactive element that triggers a specific action and also lets users know what will happen next.",
-    url: "/projects/sistent/components/button",
-  },
-  {
-    id: 2,
-    name: "Text Input",
-    description:
-      "A text input is made up of multiple elements that combine to form a component that helps users to read, write, and edit text in an interface.",
-    url: "/projects/sistent/components/text-input",
-  },
-  {
-    id: 3,
-    name: "Modal",
-    description:
-      "A text input is made up of multiple elements that combine to form a component that helps users to read, write, and edit text in an interface.",
-    url: "/projects/sistent/components/modal",
-  },
-  {
-    id: 4,
-    name: "Paper",
-    description:
-      "The Paper component offers an elevated surface with shadow effects, following Material Design’s elevation system.",
-    url: "/projects/sistent/components/paper",
-  },
-  {
-    id: 5,
-    name: "Popper",
-    description:
-      "A popper is a tooltip that appears when a user interacts with an element.",
-    url: "/projects/sistent/components/popper",
-  },
-  {
-    id: 6,
-    name: "Text Field",
-    description:
-      "The TextField component is a versatile input field used to capture user input in forms and user interfaces.",
-    url: "/projects/sistent/components/text-field",
-  },
-  {
-    id: 7,
-    name: "Link",
-    description:
-      "Links are essential and integral components of an interface. They are primarily used for navigation, guiding users to the next step in a journey or redirecting them to relevant sections or pages.",
-    url: "/projects/sistent/components/link",
-  },
-  {
-    id: 8,
-    name: "Container",
-    description:
-      "Containers align and center content, providing responsive layout options for different screen sizes.",
-    url: "/projects/sistent/components/container",
-  },
-  {
-    id: 9,
-    name: "ButtonGroup",
-    description:
-      "ButtonGroup is a component that groups multiple buttons together.",
-    url: "/projects/sistent/components/button-group",
-  },
-  {
-    id: 10,
-    name: "Box",
-    description:
-      "Box is used as a flexible container for layout and styling, allowing quick customization and responsive design adjustments.",
-    url: "/projects/sistent/components/box",
-  },
-  {
-    id: 11,
-    name: "Tooltip",
-    description:
-      "The Tooltip component is a small pop-up box that appears when a user hovers over an element.",
-    url: "/projects/sistent/components/tooltip",
-  },
-  {
-    id: 12,
-    name: "Backdrop",
-    description:
-      "Backdrop component overlays a dimmed screen to focus attention on foreground content.",
-    url: "/projects/sistent/components/backdrop",
-  },
-];
 
 const SistentComponents = () => {
   const [searchQuery, setSearchQuery] = useState("");