🚨 CRITICAL FIX: Replace require() with dynamic imports for webpack compatibility

- Replace require('liquidjs') and require('mustache') with dynamic imports
- Fix webpack compatibility issues and ES module support
- Make template engine initialization lazy and async
- Add proper error handling for optional dependencies
- Use Function('return import(...)') pattern to avoid TypeScript issues
- Maintain backward compatibility with existing configurations

This resolves critical webpack bundling issues in client applications.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

src/services/MailingService.ts

@@ -73,18 +73,22 @@ export class MailingService implements IMailingService {
     const engine = this.config.templateEngine || 'liquidjs'
 
     if (engine === 'liquidjs') {
-      this.initializeLiquidJS()
+      // LiquidJS will be initialized lazily on first use
+      this.liquid = null
     } else if (engine === 'mustache') {
-      // Mustache doesn't need initialization, we'll use it directly in renderTemplate
+      // Mustache will be loaded dynamically on first use
       this.liquid = null
     } else if (engine === 'simple') {
       this.liquid = null
     }
   }
 
-  private initializeLiquidJS(): void {
+  private async initializeLiquidJS(): Promise<void> {
+    if (this.liquid) return // Already initialized
+
     try {
-      const { Liquid: LiquidEngine } = require('liquidjs')
+      const liquidModule = await Function('return import("liquidjs")')() as any
+      const { Liquid: LiquidEngine } = liquidModule
       this.liquid = new LiquidEngine()
 
       // Register custom filters (equivalent to Handlebars helpers)
@@ -396,24 +400,27 @@ export class MailingService implements IMailingService {
 
     const engine = this.config.templateEngine || 'liquidjs'
 
-    // Use LiquidJS if available and configured
-    if (engine === 'liquidjs' && this.liquid) {
+    // Use LiquidJS if configured
+    if (engine === 'liquidjs') {
       try {
-        return await this.liquid.parseAndRender(template, variables)
+        await this.initializeLiquidJS()
+        if (this.liquid) {
+          return await this.liquid.parseAndRender(template, variables)
+        }
       } catch (error) {
         console.error('LiquidJS template rendering error:', error)
-        return template
       }
     }
 
     // Use Mustache if configured
     if (engine === 'mustache') {
       try {
-        const Mustache = require('mustache')
-        return Mustache.render(template, variables)
+        const mustacheResult = await this.renderWithMustache(template, variables)
+        if (mustacheResult !== null) {
+          return mustacheResult
+        }
       } catch (error) {
         console.warn('Mustache not available. Falling back to simple variable replacement. Install mustache package.')
-        return this.simpleVariableReplacement(template, variables)
       }
     }
 
@@ -421,6 +428,17 @@ export class MailingService implements IMailingService {
     return this.simpleVariableReplacement(template, variables)
   }
 
+  private async renderWithMustache(template: string, variables: Record<string, any>): Promise<string | null> {
+    try {
+      // Dynamic import with proper typing
+      const mustacheModule = await Function('return import("mustache")')() as any
+      const Mustache = mustacheModule.default || mustacheModule
+      return Mustache.render(template, variables)
+    } catch (error) {
+      return null
+    }
+  }
+
   private simpleVariableReplacement(template: string, variables: Record<string, any>): string {
     return template.replace(/\{\{(\w+)\}\}/g, (match, key) => {
       const value = variables[key]