fix Yasgui window nextjs build error and document solution

apps/exhibition-live/package.json

@@ -7,7 +7,7 @@
     "dev:vite": "vite --host",
     "build": "next build",
     "demo": "bun run dev:vite",
-    "start": "next start",
+    "start": "next start || bunx serve@latest -p 3000 ./out",
     "lint": "next lint",
     "test": "NODE_OPTIONS=--experimental-vm-modules jest -w",
     "test:jsonSchema2Construct": "NODE_OPTIONS=--experimental-vm-modules jest --watch --runTestsByPath components/utils/sparql/jsonSchema2construct.test.ts ",

apps/exhibition-live/stories/development/ProblemSolving.mdx

@@ -21,3 +21,70 @@ adb-next:dev: File was processed with these loaders:
 First one has to check whether the error does not appear in production mode, by building the project and running it.
 If it really just shows up in dev mode and a complete reinstallation of node dependencies does not help, one can try to exclude the problematic module from being transpiled by next.js.
 Delete it manually from the `node_modules` folder and add it to the `transpileModules` array in the `next.config.js` file.
+
+
+# NextJS Development Errors
+
+## Collecting page data  .ReferenceError: window is not defined
+
+This error occurs when a component is trying to access the window object during server side rendering. To fix this, wrap the code that is trying to access the window object in a check to see if the window object is defined.
+
+This example comes from the `@slub/edb-debug-utils` package:
+
+```typescript jsx
+import dynamic from "next/dynamic";
+import {YasguiSPARQLEditorProps} from "./YasguiSPARQLEditorProps";
+
+const DynamicComponentWithNoSSR = dynamic(
+  () => import("./YasguiSPARQLEditor"),
+  {
+    ssr: false,
+  },
+);
+
+export const YasguiSPARQLEditorNoSSR = (props: YasguiSPARQLEditorProps) => (
+  <DynamicComponentWithNoSSR {...props} />
+);
+```
+#### Explanation:
+
+1. Use separate `.ts` File for Props
+2. Use `dynamic` from `next/dynamic` to import the component
+
+If the error still persists, try to wrap the external library within an dynamic import:
+
+```typescript jsx
+import type Yasgui from "@triply/yasgui";
+import React, {FunctionComponent, useEffect, useState} from "react";
+
+import {YasguiSPARQLEditorProps} from "./YasguiSPARQLEditorProps";
+
+export const YasguiSPARQLEditor: FunctionComponent<YasguiSPARQLEditorProps> = ({
+  onInit
+}) => {
+  const [yasgui, setYasgui] = useState<Yasgui | null>(null);
+
+  useEffect(() => {
+    import("@triply/yasgui").then(({default: YasguiCls}) => {
+    setYasgui((yg) => {
+      const el = document.getElementById("yasgui");
+      return yg ? yg : new YasguiCls(el, { yasqe: {
+                queryingDisabled: undefined,
+                showQueryButton: true }})
+      });
+    });
+  }, [setYasgui]);
+
+  useEffect(() => {
+    if (yasgui && onInit) onInit(yasgui);
+  }, [onInit, yasgui]);
+
+  return <div id={"yasgui"} />;
+};
+
+```
+
+#### Explanation:
+
+1. For typescript, use `import type` to import the type of the library, this will not import the library itself, but only the type
+2. Use `import` to import the library itself within the `useEffect` hook, this will only import the library when the component is rendered

packages/debug-utils/src/SPARQLToolkit.tsx

@@ -4,7 +4,8 @@ import React, { FunctionComponent, useState } from "react";
 
 import { YasguiSPARQLEditorNoSSR } from "./YasguiSPARQLEditorNoSSR";
 import { useAdbContext } from "@slub/edb-state-hooks";
-import type { YasguiSPARQLEditorProps } from "./YasguiSPARQLEditor";
+
+import { YasguiSPARQLEditorProps } from "./YasguiSPARQLEditorProps";
 
 interface OwnProps {
   onSendClicked?: () => void;

packages/debug-utils/src/YasguiSPARQLEditor.tsx

@@ -1,14 +1,8 @@
-import Yasgui from "@triply/yasgui";
+import type Yasgui from "@triply/yasgui";
 import React, { FunctionComponent, useEffect, useState } from "react";
 
 import { Prefixes } from "@slub/edb-core-types";
-
-interface OwnProps {
-  onInit?: (yasgu: Yasgui) => void;
-  prefixes?: Prefixes;
-}
-
-export type YasguiSPARQLEditorProps = OwnProps;
+import { YasguiSPARQLEditorProps } from "./YasguiSPARQLEditorProps";
 
 const withPrefixes = (yg: Yasgui, prefixes?: Prefixes) => {
   const yasqe = yg.getTab(yg.persistentConfig.currentId())?.getYasqe();
@@ -25,19 +19,21 @@ const YasguiSPARQLEditor: FunctionComponent<YasguiSPARQLEditorProps> = ({
   const [yasgui, setYasgui] = useState<Yasgui | null>(null);
 
   useEffect(() => {
-    setYasgui((yg) => {
-      const el = document.getElementById("yasgui");
-      return !el || yg
-        ? yg
-        : withPrefixes(
-            new Yasgui(el, {
-              yasqe: {
-                queryingDisabled: undefined,
-                showQueryButton: true,
-              },
-            }),
-            prefixes,
-          );
+    import("@triply/yasgui").then(({ default: YasguiCls }) => {
+      setYasgui((yg) => {
+        const el = document.getElementById("yasgui");
+        return !el || yg
+          ? yg
+          : withPrefixes(
+              new YasguiCls(el, {
+                yasqe: {
+                  queryingDisabled: undefined,
+                  showQueryButton: true,
+                },
+              }),
+              prefixes,
+            );
+      });
     });
   }, [setYasgui]);
   useEffect(() => {

packages/debug-utils/src/YasguiSPARQLEditorNoSSR.tsx

@@ -1,5 +1,5 @@
 import dynamic from "next/dynamic";
-import type { YasguiSPARQLEditorProps } from "./YasguiSPARQLEditor";
+import { YasguiSPARQLEditorProps } from "./YasguiSPARQLEditorProps";
 
 const DynamicComponentWithNoSSR = dynamic(
   () => import("./YasguiSPARQLEditor"),

packages/debug-utils/src/YasguiSPARQLEditorProps.ts

@@ -0,0 +1,7 @@
+import type Yasgui from "@triply/yasgui";
+import { Prefixes } from "@slub/edb-core-types";
+
+export type YasguiSPARQLEditorProps = {
+  onInit?: (yasgu: Yasgui) => void;
+  prefixes?: Prefixes;
+};