Fix/build errors 2

packages/nextjs/app/analytics/page.tsx

@@ -8,7 +8,7 @@
  */
 
 import dynamic from "next/dynamic";
-import { useState, useEffect } from "use client";
+import { useState, useEffect } from "react";
 import type { AnalyticsDashboardData, TimePeriod } from "~~/types/analytics";
 import { analyticsService } from "~~/services/analytics";
 

packages/nextjs/app/debug/page.tsx

@@ -1,6 +1,7 @@
+"use client";
+
 import dynamic from "next/dynamic";
 import type { NextPage } from "next";
-import { getMetadata } from "~~/utils/scaffold-eth/getMetadata";
 
 // Dynamic import for DebugContracts to reduce initial bundle size
 const DebugContracts = dynamic(() => import("./_components/DebugContracts").then(mod => ({ default: mod.DebugContracts })), {
@@ -12,11 +13,6 @@ const DebugContracts = dynamic(() => import("./_components/DebugContracts").then
   ssr: false,
 });
 
-export const metadata = getMetadata({
-  title: "Debug Contracts",
-  description: "Debug your deployed 🏗 Scaffold-ETH 2 contracts in an easy way",
-});
-
 const Debug: NextPage = () => {
   return (
     <>

packages/nextjs/app/layout.tsx

@@ -6,7 +6,6 @@ import { PWAProvider } from "~~/components/pwa/PWAProvider";
 import { AccessibilityProvider } from "~~/components/accessibility";
 import { I18nProvider } from "~~/components/i18n";
 import "~~/styles/globals.css";
-import "~~/styles/accessibility.css";
 import { getMetadata, getViewport } from "~~/utils/scaffold-eth/getMetadata";
 
 export const metadata = getMetadata({

packages/nextjs/components/voicepay/RealPaymentInterface.tsx

@@ -2,7 +2,7 @@
 
 import { useState, useRef } from 'react';
 import { useAccount } from 'wagmi';
-import { useVoicePay } from '~/hooks/useVoicePay';
+import { useVoicePay } from '~~/hooks/useVoicePay';
 import { VoiceRecorder } from './VoiceRecorder';
 import { RealBalanceDisplay } from './RealBalanceDisplay';
 import { PaymentConfirmationModal } from './PaymentConfirmationModal';

packages/nextjs/i18n/index.ts

@@ -12,28 +12,51 @@ import ig from './locales/ig.json';
 import sw from './locales/sw.json';
 import ar from './locales/ar.json';
 
-i18n
-  .use(LanguageDetector) // Detect user language
-  .use(initReactI18next) // React integration
-  .init({
-    resources: {
-      en: { translation: en },
-      fr: { translation: fr },
-      tw: { translation: tw },
-      ha: { translation: ha },
-      yo: { translation: yo },
-      ig: { translation: ig },
-      sw: { translation: sw },
-      ar: { translation: ar },
-    },
-    fallbackLng: 'en',
-    interpolation: {
-      escapeValue: false, // React already escapes
-    },
-    detection: {
-      order: ['localStorage', 'navigator', 'htmlTag'],
-      caches: ['localStorage'],
-    },
-  });
+// Only initialize on client side
+if (typeof window !== 'undefined') {
+  i18n
+    .use(LanguageDetector) // Detect user language
+    .use(initReactI18next) // React integration
+    .init({
+      resources: {
+        en: { translation: en },
+        fr: { translation: fr },
+        tw: { translation: tw },
+        ha: { translation: ha },
+        yo: { translation: yo },
+        ig: { translation: ig },
+        sw: { translation: sw },
+        ar: { translation: ar },
+      },
+      fallbackLng: 'en',
+      interpolation: {
+        escapeValue: false, // React already escapes
+      },
+      detection: {
+        order: ['localStorage', 'navigator', 'htmlTag'],
+        caches: ['localStorage'],
+      },
+    });
+} else {
+  // Server-side initialization (minimal)
+  i18n
+    .use(initReactI18next)
+    .init({
+      resources: {
+        en: { translation: en },
+        fr: { translation: fr },
+        tw: { translation: tw },
+        ha: { translation: ha },
+        yo: { translation: yo },
+        ig: { translation: ig },
+        sw: { translation: sw },
+        ar: { translation: ar },
+      },
+      fallbackLng: 'en',
+      interpolation: {
+        escapeValue: false,
+      },
+    });
+}
 
 export default i18n;

packages/nextjs/next.config.ts

@@ -29,8 +29,17 @@ const nextConfig: NextConfig = {
       "react-hot-toast",
     ],
   },
-  webpack: config => {
+  webpack: (config, { isServer }) => {
+    // Polyfill 'self' for server-side builds
+    if (isServer) {
+      config.resolve.fallback = {
+        ...config.resolve.fallback,
+        'self': false,
+      };
+    }
+
     config.resolve.fallback = {
+      ...config.resolve.fallback,
       fs: false,
       net: false,
       tls: false,

packages/nextjs/package.json

@@ -51,6 +51,8 @@
     "react-dom": "^19.0.0",
     "react-hot-toast": "^2.4.0",
     "react-i18next": "^16.5.0",
+    "react-is": "18.3.1",
+    "recharts": "^3.5.1",
     "usehooks-ts": "^3.1.0",
     "viem": "^2.37.9",
     "wagmi": "^2.16.4",
@@ -65,6 +67,7 @@
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@types/node": "^18.19.50",
     "@types/react": "^19.0.7",
+    "@types/react-is": "^19",
     "@vitejs/plugin-react": "^4.2.1",
     "@vitest/coverage-v8": "^1.0.4",
     "abitype": "1.0.6",

packages/nextjs/postcss.config.js

@@ -1,6 +1,5 @@
 module.exports = {
   plugins: {
     '@tailwindcss/postcss': {},
-    'tailwindcss-rtl': {},
   },
 };