Fixed build errors

docs/tools/Bubble.mdx

@@ -2,9 +2,9 @@
 sidebar_position: 3
 ---
 
-import { RenderBubble } from "../../src/geovisto_demos/export";
+import { Render_Bubble } from "../../src/geovisto_demos/export";
 
-export const Bubble = () => <RenderBubble />;
+export const Bubble = () => <Render_Bubble />;
 
 A bubble map is proportional symbol map, which is a type of thematic map that uses map symbols (bubbles in this example) that vary in size to represent a quantitative variable.[^1]<br/>
 Example below contains data about **Covid cases** in Czech Republic.

docs/tools/Choropleth.mdx

@@ -2,9 +2,9 @@
 sidebar_position: 6
 ---
 
-import { RenderChoropleth } from "../../src/geovisto_demos/export";
+import { Render_Choropleth } from "../../src/geovisto_demos/export";
 import "../../src/geovisto_demos/modules/choropleth/Choropleth.css";
-export const Choropleth = () => <RenderChoropleth />;
+export const Choropleth = () => <Render_Choropleth />;
 
 # Choropleth
 

docs/tools/Connection.mdx

@@ -2,8 +2,8 @@
 sidebar_position: 8
 ---
 
-import { RenderConnection } from "../../src/geovisto_demos/export";
-export const Connection = () => <RenderConnection />;
+import { Render_Connection } from "../../src/geovisto_demos/export";
+export const Connection = () => <Render_Connection />;
 
 # Connection
 

docs/tools/Dot.mdx

@@ -2,9 +2,9 @@
 sidebar_position: 5
 ---
 
-import { RenderDot } from "../../src/geovisto_demos/export";
+import { Render_Dot } from "../../src/geovisto_demos/export";
 
-export const Dot = () => <RenderDot />;
+export const Dot = () => <Render_Dot />;
 
 A dot distribution map (or a dot density map or simply a dot map) is a type of thematic map that uses a point symbol to visualize the geographic distribution of a large number of related phenomena.[^1]<br/>
 Example below contains data about **Czech cities and villages**.

docs/tools/Heat.mdx

@@ -2,9 +2,9 @@
 sidebar_position: 2
 ---
 
-import { RenderHeat } from "../../src/geovisto_demos/export";
+import { Render_Heat } from "../../src/geovisto_demos/export";
 
-export const Heat = () => <RenderHeat />;
+export const Heat = () => <Render_Heat />;
 
 A spatial heat map displays the magnitude of a spatial phenomena as color, usually cast over a map.[^1]<br/>
 Example below contains data about **Maximum temperature** over cities and places in Australia.

docs/tools/Marker.mdx

@@ -2,9 +2,9 @@
 sidebar_position: 7
 ---
 
-import { RenderMarker } from "../../src/geovisto_demos/export";
+import { Render_Marker } from "../../src/geovisto_demos/export";
 import "../../src/geovisto_demos/modules/choropleth/Choropleth.css";
-export const Marker = () => <RenderMarker />;
+export const Marker = () => <Render_Marker />;
 
 # Marker
 

docs/tools/Spike.mdx

@@ -2,9 +2,9 @@
 sidebar_position: 4
 ---
 
-import { RenderSpike } from "../../src/geovisto_demos/export";
+import { Render_Spike } from "../../src/geovisto_demos/export";
 
-export const Spike = () => <RenderSpike />;
+export const Spike = () => <Render_Spike />;
 
 A spike map is proportional symbol map, which is a type of thematic map that uses map symbols (spikes in this example) that vary in size to represent a quantitative variable.[^1]<br/>
 Example below contains data about **Covid cases** in Czech Republic.

src/geovisto_demos/export.tsx

@@ -16,58 +16,79 @@ import {
  * @author Tomas Koscielniak
  */
 
-export const RenderHeat = (): JSX.Element => (
-    <BrowserOnly fallback={<div>Loading...</div>}>
-        {() => {
-            return <Heat />;
-        }}
-    </BrowserOnly>
-);
+export function Render_Heat(): JSX.Element {
+    return (
+        <BrowserOnly fallback={<div>Loading...</div>}>
+            {() => {
+                const Heat = require("./modules/heat/Heat").default;
+                return <Heat />;
+            }}
+        </BrowserOnly>
+    );
+}
 
-export const RenderChoropleth = (): JSX.Element => (
-    <BrowserOnly fallback={<div>Loading...</div>}>
-        {() => {
-            return <Choropleth />;
-        }}
-    </BrowserOnly>
-);
+export function Render_Choropleth(): JSX.Element {
+    return (
+        <BrowserOnly fallback={<div>Loading...</div>}>
+            {() => {
+                const Choropleth =
+                    require("./modules/choropleth/Choropleth").default;
+                return <Choropleth />;
+            }}
+        </BrowserOnly>
+    );
+}
 
-export const RenderDot = (): JSX.Element => (
-    <BrowserOnly fallback={<div>Loading...</div>}>
-        {() => {
-            return <Dot />;
-        }}
-    </BrowserOnly>
-);
+export function Render_Dot(): JSX.Element {
+    return (
+        <BrowserOnly fallback={<div>Loading...</div>}>
+            {() => {
+                const Dot = require("./modules/dot/Dot").default;
+                return <Dot />;
+            }}
+        </BrowserOnly>
+    );
+}
 
-export const RenderBubble = (): JSX.Element => (
-    <BrowserOnly fallback={<div>Loading...</div>}>
-        {() => {
-            return <Bubble />;
-        }}
-    </BrowserOnly>
-);
+export function Render_Bubble(): JSX.Element {
+    return (
+        <BrowserOnly fallback={<div>Loading...</div>}>
+            {() => {
+                const Bubble = require("./modules/bubble/Bubble").default;
+                return <Bubble />;
+            }}
+        </BrowserOnly>
+    );
+}
 
-export const RenderSpike = (): JSX.Element => (
-    <BrowserOnly fallback={<div>Loading...</div>}>
-        {() => {
-            return <Spike />;
-        }}
-    </BrowserOnly>
-);
-
-export const RenderMarker = (): JSX.Element => (
-    <BrowserOnly fallback={<div>Loading...</div>}>
-        {() => {
-            return <Marker />;
-        }}
-    </BrowserOnly>
-);
-
-export const RenderConnection = (): JSX.Element => (
-    <BrowserOnly fallback={<div>Loading...</div>}>
-        {() => {
-            return <Connection />;
-        }}
-    </BrowserOnly>
-);
+export function Render_Spike(): JSX.Element {
+    return (
+        <BrowserOnly fallback={<div>Loading...</div>}>
+            {() => {
+                const Spike = require("./modules/spike/Spike").default;
+                return <Spike />;
+            }}
+        </BrowserOnly>
+    );
+}
+export function Render_Marker(): JSX.Element {
+    return (
+        <BrowserOnly fallback={<div>Loading...</div>}>
+            {() => {
+                const Marker = require("./modules/marker/Marker").default;
+                return <Marker />;
+            }}
+        </BrowserOnly>
+    );
+}
+export function Render_Connection(): JSX.Element {
+    return (
+        <BrowserOnly fallback={<div>Loading...</div>}>
+            {() => {
+                const Connection =
+                    require("./modules/connection/Connection").default;
+                return <Connection />;
+            }}
+        </BrowserOnly>
+    );
+}

src/pages/playground.tsx

@@ -26,16 +26,22 @@ export const Home = (): JSX.Element => (
                 page.
             </div>
             <div className="container-fluid w-100 p-3 pb-lg-5 text-center lead light">
-                <RenderGeovisto />
+                <Render_geovisto />
             </div>
         </main>
     </Layout>
 );
 
-export const RenderGeovisto = (): JSX.Element => (
-    <BrowserOnly fallback={<div>Loading...</div>}>
-        {() => <Playground />}
-    </BrowserOnly>
-);
+
+export function Render_geovisto(): JSX.Element {
+    return (
+        <BrowserOnly fallback={<div>Loading...</div>}>
+            {() => {
+                const Playground = require('../geovisto_demos/playground').default;
+                return <Playground />;
+            }}
+        </BrowserOnly>
+    );
+}
 
 export default Home;