OUT-2541 | TypeError: (lookupProperty(...) || (depth0 && lookupProperty(...)) || container.hooks.helperMissing).call is not a function

src/app/client-preview/page.tsx

@@ -1,17 +1,17 @@
-import Handlebars from 'handlebars'
-import { IClient, ICustomField, ISettings } from '@/types/interfaces'
-import ClientPreview from '../components/ClientPreview'
 import { apiUrl } from '@/config'
+import { IClient, ICustomField, ISettings } from '@/types/interfaces'
+import { defaultBannerImagePath, defaultBgColor } from '@/utils/constants'
+import { CopilotAPI } from '@/utils/copilotApiUtils'
+import { prepareCustomLabel } from '@/utils/customLabels'
+import { getPreviewMode } from '@/utils/previewMode'
+import { safeCompile } from '@/utils/safeCompile'
+import { preprocessTemplate } from '@/utils/string'
 import Image from 'next/image'
 import { z } from 'zod'
-import { CopilotAPI } from '@/utils/copilotApiUtils'
-import InvalidToken from '../components/InvalidToken'
 import { defaultState } from '../../../defaultState'
-import { defaultBannerImagePath, defaultBgColor } from '@/utils/constants'
-import { getPreviewMode } from '@/utils/previewMode'
+import ClientPreview from '../components/ClientPreview'
+import InvalidToken from '../components/InvalidToken'
 import { NoPreviewSupport } from './NoPreviewSupport'
-import { preprocessTemplate } from '@/utils/string'
-import { prepareCustomLabel } from '@/utils/customLabels'
 
 export const revalidate = 0
 
@@ -128,7 +128,7 @@ export default async function ClientPreviewPage({
     }
   }
 
-  const template = Handlebars?.compile(
+  const template = safeCompile(
     preprocessTemplate(
       prepareCustomLabel(settings?.content, workspace.labels, {
         isClientMode: true,

src/app/components/EditorInterface.tsx

@@ -32,7 +32,7 @@
 import TableRow from '@tiptap/extension-table-row'
 import Text from '@tiptap/extension-text'
 import Underline from '@tiptap/extension-underline'
 import Handlebars from 'handlebars'
 import { Scrollbars } from 'react-custom-scrollbars'
 import { Toaster } from 'react-hot-toast'
 
@@ -63,6 +63,7 @@
 import Image from 'next/image'
 import { defaultState } from '../../../defaultState'
 import { preprocessTemplate } from '@/utils/string'
+import { safeCompile } from '@/utils/safeCompile'
 
 interface IEditorInterface {
   settings: ISettings | null
@@ -185,7 +186,7 @@
 
   useEffect(() => {
     if (appState?.appState.readOnly) {
-      const template = Handlebars?.compile(
+      const template = safeCompile(
         preprocessTemplate(
           prepareCustomLabel(
             replaceCustomLabelsWithPlaceholders(

src/hooks/useAppData.tsx

@@ -1,8 +1,8 @@
 import { createContext, PropsWithChildren, useContext, useMemo } from 'react'
 import { useAppState } from '@/hooks/useAppState'
 import { IClient, INotification } from '@/types/interfaces'
-import Handlebars from 'handlebars'
-import { CustomField, CustomFieldsSchema } from '@/types/common'
+import { CustomField } from '@/types/common'
+import { safeCompile } from '@/utils/safeCompile'
 
 const AppDataContext = createContext<null | Record<string, unknown>>({})
 
@@ -17,7 +17,7 @@ export const useAppData = (template: string) => {
     return template
   }
 
-  return Handlebars?.compile(template || '')(appData)
+  return safeCompile(template || '')(appData)
 }
 
 export const AppDataProvider = ({ children }: PropsWithChildren) => {

src/utils/safeCompile.ts

@@ -0,0 +1,14 @@
+import Handlebars, { TemplateDelegate } from 'handlebars'
+
+/**
+ * Safely compiles a Handlebars template.
+ * Invalid/malformed placeholders like {{client.}} are removed.
+ * Missing properties resolve to empty string.
+ */
+export const safeCompile = (templateSource: string): TemplateDelegate => {
+  const sanitizedTemplate = templateSource.replace(/{{\s*[\w]+\.\s*}}/g, '') // Remove placeholders ending with a dot
+
+  Handlebars.registerHelper('helperMissing', () => '')
+
+  return Handlebars?.compile(sanitizedTemplate, { strict: false })
+}