Add debug pages and Next.js config for lightweight-charts

- Added multiple test pages to debug chart rendering issues
- Updated Next.js config to handle ES modules and transpile lightweight-charts
- Attempting to resolve chart initialization problems

app/cdn-test/page.tsx

@@ -0,0 +1,96 @@
+'use client'
+import React, { useEffect, useRef, useState } from 'react'
+
+export default function StandaloneTest() {
+  const chartContainerRef = useRef<HTMLDivElement>(null)
+  const [status, setStatus] = useState('Starting...')
+
+  useEffect(() => {
+    const initChart = async () => {
+      try {
+        setStatus('Testing CDN version...')
+        
+        // Try using the CDN version instead
+        if (typeof window !== 'undefined' && !window.LightweightCharts) {
+          setStatus('Loading CDN script...')
+          
+          const script = document.createElement('script')
+          script.src = 'https://unpkg.com/lightweight-charts@5.0.8/dist/lightweight-charts.standalone.production.js'
+          script.onload = () => {
+            setStatus('CDN loaded, creating chart...')
+            createChartWithCDN()
+          }
+          script.onerror = () => {
+            setStatus('CDN load failed')
+          }
+          document.head.appendChild(script)
+        } else if (window.LightweightCharts) {
+          setStatus('CDN already loaded, creating chart...')
+          createChartWithCDN()
+        }
+        
+      } catch (error) {
+        console.error('Error:', error)
+        setStatus(`Error: ${error}`)
+      }
+    }
+
+    const createChartWithCDN = () => {
+      try {
+        if (!chartContainerRef.current) {
+          setStatus('No container')
+          return
+        }
+
+        const { createChart, CandlestickSeries } = (window as any).LightweightCharts
+        
+        setStatus('Creating chart with CDN...')
+        const chart = createChart(chartContainerRef.current, {
+          width: 800,
+          height: 400,
+          layout: {
+            background: { color: '#1a1a1a' },
+            textColor: '#ffffff',
+          },
+        })
+        
+        setStatus('Adding series...')
+        const series = chart.addSeries(CandlestickSeries, {
+          upColor: '#26a69a',
+          downColor: '#ef5350',
+        })
+        
+        setStatus('Setting data...')
+        series.setData([
+          { time: '2025-07-14', open: 100, high: 105, low: 95, close: 102 },
+          { time: '2025-07-15', open: 102, high: 107, low: 98, close: 104 },
+          { time: '2025-07-16', open: 104, high: 109, low: 101, close: 106 },
+        ])
+        
+        setStatus('Chart created successfully!')
+        
+      } catch (error) {
+        console.error('CDN chart error:', error)
+        setStatus(`CDN Error: ${error}`)
+      }
+    }
+
+    initChart()
+  }, [])
+
+  return (
+    <div className="min-h-screen bg-gray-900 p-8">
+      <h1 className="text-white text-3xl mb-4">CDN Chart Test</h1>
+      <div className="text-green-400 text-lg mb-4">Status: {status}</div>
+      
+      <div 
+        ref={chartContainerRef}
+        className="border-2 border-blue-500 bg-gray-800"
+        style={{ 
+          width: '800px', 
+          height: '400px',
+        }}
+      />
+    </div>
+  )
+}

app/debug-chart/page.tsx

@@ -0,0 +1,119 @@
+'use client'
+import React, { useEffect, useRef, useState } from 'react'
+
+export default function DebugChart() {
+  const chartContainerRef = useRef<HTMLDivElement>(null)
+  const [logs, setLogs] = useState<string[]>([])
+  const [error, setError] = useState<string | null>(null)
+
+  const addLog = (message: string) => {
+    console.log(message)
+    setLogs(prev => [...prev, `${new Date().toLocaleTimeString()}: ${message}`])
+  }
+
+  useEffect(() => {
+    addLog('Component mounted')
+    
+    if (!chartContainerRef.current) {
+      addLog('ERROR: No chart container ref')
+      return
+    }
+
+    addLog('Chart container found')
+
+    const initChart = async () => {
+      try {
+        addLog('Starting chart initialization...')
+        
+        addLog('Importing lightweight-charts...')
+        const LightweightChartsModule = await import('lightweight-charts')
+        addLog('Import successful')
+        
+        addLog('Available exports: ' + Object.keys(LightweightChartsModule).join(', '))
+        
+        const { createChart, CandlestickSeries } = LightweightChartsModule
+        addLog('Extracted createChart and CandlestickSeries')
+        
+        addLog('Creating chart...')
+        const chart = createChart(chartContainerRef.current!, {
+          width: 600,
+          height: 300,
+          layout: {
+            textColor: '#ffffff',
+            background: { color: '#1a1a1a' },
+          },
+        })
+        addLog('Chart created successfully')
+
+        addLog('Adding candlestick series...')
+        const candlestickSeries = chart.addSeries(CandlestickSeries, {
+          upColor: '#26a69a',
+          downColor: '#ef5350',
+        })
+        addLog('Series added successfully')
+
+        addLog('Generating test data...')
+        const data = [
+          { time: '2025-07-10', open: 100, high: 110, low: 95, close: 105 },
+          { time: '2025-07-11', open: 105, high: 115, low: 100, close: 110 },
+          { time: '2025-07-12', open: 110, high: 120, low: 105, close: 115 },
+          { time: '2025-07-13', open: 115, high: 125, low: 110, close: 118 },
+          { time: '2025-07-14', open: 118, high: 128, low: 113, close: 122 },
+          { time: '2025-07-15', open: 122, high: 132, low: 117, close: 125 },
+          { time: '2025-07-16', open: 125, high: 135, low: 120, close: 130 },
+        ]
+        addLog(`Generated ${data.length} data points`)
+
+        addLog('Setting data on series...')
+        candlestickSeries.setData(data)
+        addLog('Data set successfully - chart should be visible!')
+
+        addLog('Chart initialization complete')
+
+      } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : String(err)
+        const errorStack = err instanceof Error ? err.stack : 'No stack trace'
+        addLog(`ERROR: ${errorMessage}`)
+        console.error('Chart initialization error:', err)
+        setError(`${errorMessage}\n\nStack: ${errorStack}`)
+      }
+    }
+
+    initChart()
+  }, [])
+
+  return (
+    <div className="min-h-screen bg-gray-900 p-8">
+      <h1 className="text-white text-2xl mb-4">Debug Chart Test</h1>
+      
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+        <div>
+          <h2 className="text-white text-lg mb-2">Chart</h2>
+          <div 
+            ref={chartContainerRef} 
+            className="bg-gray-800 border border-gray-600 rounded"
+            style={{ width: '600px', height: '300px' }}
+          />
+        </div>
+
+        <div>
+          <h2 className="text-white text-lg mb-2">Debug Logs</h2>
+          <div className="bg-gray-800 p-4 rounded h-80 overflow-y-auto">
+            {logs.map((log, index) => (
+              <div key={index} className="text-gray-300 text-sm font-mono mb-1">
+                {log}
+              </div>
+            ))}
+          </div>
+          
+          {error && (
+            <div className="mt-4 bg-red-900/20 border border-red-500 p-4 rounded">
+              <h3 className="text-red-400 font-semibold mb-2">Error Details:</h3>
+              <pre className="text-red-300 text-xs whitespace-pre-wrap">{error}</pre>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

app/direct-chart/page.tsx

@@ -0,0 +1,72 @@
+'use client'
+import React, { useEffect } from 'react'
+
+export default function DirectChart() {
+  useEffect(() => {
+    const container = document.getElementById('chart-container')
+    if (!container) return
+
+    const initChart = async () => {
+      try {
+        console.log('Starting direct chart...')
+        
+        // Import with explicit .mjs extension
+        const module = await import('lightweight-charts/dist/lightweight-charts.production.mjs')
+        console.log('Module loaded:', module)
+        
+        const { createChart, CandlestickSeries } = module
+        console.log('Functions extracted')
+        
+        const chart = createChart(container, {
+          width: 800,
+          height: 400,
+          layout: {
+            background: { color: '#1a1a1a' },
+            textColor: '#ffffff',
+          },
+        })
+        console.log('Chart created')
+        
+        const series = chart.addSeries(CandlestickSeries, {
+          upColor: '#26a69a',
+          downColor: '#ef5350',
+        })
+        console.log('Series added')
+        
+        series.setData([
+          { time: '2025-07-14', open: 100, high: 105, low: 95, close: 102 },
+          { time: '2025-07-15', open: 102, high: 107, low: 98, close: 104 },
+          { time: '2025-07-16', open: 104, high: 109, low: 101, close: 106 },
+        ])
+        console.log('Data set - should be visible!')
+        
+      } catch (error) {
+        console.error('Direct chart error:', error)
+        const statusDiv = document.getElementById('status')
+        if (statusDiv) {
+          statusDiv.textContent = `Error: ${error}`
+          statusDiv.className = 'text-red-400 text-lg mb-4'
+        }
+      }
+    }
+
+    // Add a small delay to ensure DOM is ready
+    setTimeout(initChart, 100)
+  }, [])
+
+  return (
+    <div className="min-h-screen bg-gray-900 p-8">
+      <h1 className="text-white text-3xl mb-4">Direct DOM Chart</h1>
+      <div id="status" className="text-yellow-400 text-lg mb-4">Loading...</div>
+      
+      <div 
+        id="chart-container"
+        className="border-2 border-green-500 bg-gray-800"
+        style={{ 
+          width: '800px', 
+          height: '400px',
+        }}
+      />
+    </div>
+  )
+}

app/simple-test/page.tsx

@@ -0,0 +1,95 @@
+'use client'
+import React, { useEffect, useRef, useState } from 'react'
+
+export default function SimpleTest() {
+  const chartContainerRef = useRef<HTMLDivElement>(null)
+  const [status, setStatus] = useState('Initializing...')
+
+  useEffect(() => {
+    const initChart = async () => {
+      try {
+        setStatus('Importing library...')
+        
+        // Test if we can import the library
+        const module = await import('lightweight-charts')
+        setStatus('Library imported')
+        
+        // Test if we can extract functions
+        const { createChart, CandlestickSeries } = module
+        setStatus('Functions extracted')
+        
+        if (!chartContainerRef.current) {
+          setStatus('No container element')
+          return
+        }
+        
+        setStatus('Creating chart...')
+        
+        // Create chart with explicit dimensions
+        const chart = createChart(chartContainerRef.current, {
+          width: 800,
+          height: 400,
+          layout: {
+            background: { color: '#1a1a1a' },
+            textColor: '#ffffff',
+          },
+        })
+        
+        setStatus('Chart created')
+        
+        // Add series
+        const series = chart.addSeries(CandlestickSeries, {
+          upColor: '#00ff00',
+          downColor: '#ff0000',
+        })
+        
+        setStatus('Series added')
+        
+        // Add simple data
+        series.setData([
+          { time: '2025-07-14', open: 100, high: 105, low: 95, close: 102 },
+          { time: '2025-07-15', open: 102, high: 107, low: 98, close: 104 },
+          { time: '2025-07-16', open: 104, high: 109, low: 101, close: 106 },
+        ])
+        
+        setStatus('Data set - Chart should be visible!')
+        
+      } catch (error) {
+        console.error('Error:', error)
+        setStatus(`Error: ${error}`)
+      }
+    }
+
+    initChart()
+  }, [])
+
+  return (
+    <div className="min-h-screen bg-gray-900 p-8">
+      <h1 className="text-white text-3xl mb-4">Simple Chart Test</h1>
+      <div className="text-green-400 text-lg mb-4">Status: {status}</div>
+      
+      <div className="bg-red-500 p-2 mb-4 text-white">
+        This red border should help us see if the container is properly sized
+      </div>
+      
+      <div 
+        ref={chartContainerRef}
+        className="border-4 border-yellow-500 bg-gray-800"
+        style={{ 
+          width: '800px', 
+          height: '400px',
+          display: 'block',
+          position: 'relative'
+        }}
+      >
+        <div className="text-white p-4">
+          Container content - this should be replaced by the chart
+        </div>
+      </div>
+      
+      <div className="text-gray-400 mt-4">
+        Container ref: {chartContainerRef.current ? 'Available' : 'Not available'}
+      </div>
+    </div>
+  )
+}

next.config.ts

@@ -1,7 +1,14 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
-  /* config options here */
+  transpilePackages: ['lightweight-charts'],
+  webpack: (config) => {
+    config.resolve.fallback = {
+      ...config.resolve.fallback,
+      fs: false,
+    };
+    return config;
+  },
 };
 
 export default nextConfig;