feat: gatsby ssg works now

examples/gatsby/gatsby-ssg/gatsby-node.js

@@ -1,9 +1,68 @@
-exports.onCreateWebpackConfig = ({ actions }) => {
-  actions.setWebpackConfig({
-    resolve: {
-      fallback: {
-        path: require.resolve("path-browserify"),
-      },
-    },
-  });
-};
+const path = require('path');
+
+exports.createPages = async ({ graphql, actions, reporter }) => {
+  const { createPage } = actions;
+
+  // Dynamically import the ES Module
+  const { fetchById, detachExperienceStyles } = await import('@contentful/experiences-sdk-react');
+
+  const response = await graphql(`
+    query {
+      allContentfulExperience {
+        nodes {
+          contentful_id
+          slug
+          title
+          node_locale
+          sys {
+            contentType {
+              sys {
+                id
+              }
+            }
+          }
+        }
+      }
+    }
+  `);
+
+  if (response.errors) {
+    reporter.panicOnBuild('Error while querying Contentful data', response.errors);
+    return;
+  }
+
+  const { useContentfulClient } = require('./src/utils/useContentfulClient.ts');
+  const client = useContentfulClient();
+  const { nodes } = response.data.allContentfulExperience;
+
+  for (const node of nodes) {
+    const { slug, title, node_locale: localeCode, contentful_id, sys } = node;
+
+    try {
+      const experienceEntry = await fetchById({
+        client,
+        experienceTypeId: sys.contentType.sys.id,
+        localeCode,
+        id: contentful_id,
+      });
+
+      let experienceStyles = '';
+      if (experienceEntry) {
+        experienceStyles = detachExperienceStyles(experienceEntry) ?? '';
+      }
+
+      createPage({
+        path: `/experience/${slug}`,
+        component: path.resolve('src/templates/experiencePage.js'),
+        context: {
+          title,
+          experienceEntryJSON: JSON.stringify(experienceEntry),
+          locale: localeCode,
+          experienceStyles,
+        },
+      });
+    } catch (err) {
+      reporter.warn(`Error creating page for slug "${slug}": ${err.message}`);
+    }
+  }
+};

examples/gatsby/gatsby-ssg/package.json

@@ -16,8 +16,9 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "contentful": "^11.3.2",
     "@contentful/experiences-sdk-react": "^1.27.1",
+    "@contentful/rich-text-react-renderer": "^16.0.1",
+    "contentful": "^11.3.2",
     "gatsby": "^5.14.1",
     "path-browserify": "^1.0.1",
     "react": "^18.2.0",

examples/gatsby/gatsby-ssg/src/pages/ExperienceSlugExample.tsx

@@ -1,61 +1,25 @@
-import path from 'path';
-import { fetchById, detachExperienceStyles } from '@contentful/experiences-sdk-react';
+import React from 'react'
+import { ExperienceRoot, useFetchBySlug } from '@contentful/experiences-sdk-react';
 import { useContentfulClient } from '../utils/useContentfulClient';
 
-exports.createPages = async ({ graphql, actions, reporter }: any) => {
-  const { client } = useContentfulClient();
-  const { createPage } = actions;
-
-  // Assume that your experience type id is "experience"
-  const response = await graphql(`
-    allContentfulExperience {
-      nodes {
-        contentful_id
-        slug
-        title
-        node_locale
-        sys {
-          contentType {
-            sys {
-              id
-            }
-          }
-        }
-      }
-    }
-  `);
-
-  if (response.errors) {
-    // handle errors
-  }
+const slug = 'ExperienceSlugExample'
+const localeCode = 'en-US';
+const experienceTypeId = process.env.GATSBY_CTFL_EXPERIENCE_TYPE || '';
 
-  const { nodes } = response.data.allContentfulExperience;
-
-  for (const node of nodes) {
-    const { slug, title, node_locale: localeCode, contentful_id, sys } = node;
-
-    const experienceEntry = await fetchById({
-        client,
-        experienceTypeId: sys.contentType.sys.id,
-        localeCode,
-        id: contentful_id
-    });
+export default function ExperienceSlugExample() {
+  const { client } = useContentfulClient();
 
-    let experienceStyles = '';
+  const { experience, error, isLoading } = useFetchBySlug({
+    slug,
+    localeCode,
+    client,
+    experienceTypeId,
+  });
 
-    if (experienceEntry) {
-      experienceStyles = detachExperienceStyles(experienceEntry) ?? '';
-    }
+  if (isLoading) return <div>Loading...</div>;
+  if (error) return <div>{error.message}</div>;
 
-    createPage({
-      path: `/experience/${slug}`,
-      component: path.resolve('src/templates/experiencePage.js'),
-      context: {
-        title,
-        experienceEntryJSON: JSON.stringify(experienceEntry),
-        locale: localeCode,
-        experienceStyles
-      }
-    });
-  }
-};
+  return (
+    <ExperienceRoot experience={experience} locale={localeCode} />
+  )
+}

examples/gatsby/gatsby-ssg/tsconfig.json

@@ -98,5 +98,5 @@
     // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
     "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
   },
-  "include": ["./src/**/*", "./gatsby-node.ts", "./gatsby-config.ts", "./plugins/**/*"]
+  "include": ["./src/**/*", "gatsby-node.js", "./gatsby-config.ts", "./plugins/**/*"]
 }