Next.js 14集成TradingView Advanced图表无法显示求助

问题现象 #

在Next.js 14中集成TradingView Advanced组件，已配置默认及自定义参数，但图表始终无法显示，控制台无报错信息，看似配置正常但渲染失败。

代码片段 #

Dashboard.js #

import { ChartingLibraryWidgetOptions, ResolutionString } from '../../../public/static/charting_library/charting_library'
import dynamic from 'next/dynamic'

const defaultWidgetProps = {
  symbol: "AAPL",
  interval: "1D",
  datafeedUrl: 'https://demo_feed.tradingview.com',
  library_path: "/static/charting_library/charting_library/",
  locale: "en",
  charts_storage_url: "*",
  charts_storage_api_version: "1.0",
  client_id: "https://ezfrx.com/",
  user_id: "https://ezfrx.com/",
  fullscreen: false,
  autosize: false,
  studiesOverrides: {},
};

<div className='flex overflow-y-hidden justify-center items-center mt-4 lg:w-[100%] lg:h-[80%] max-lg:w-[100%] max-lg:h-[70%] md:w-[100%] md:h-[70%] max-md:h-[100%] sm:w-[100%] sm:h-[100%] max-sm:w-[100%] max-sm:h-[100%]'>
  <Chart graph={graph} widget_data={defaultWidgetProps} />
</div>

Chart.js #

import { widget, version } from '../../public/static/charting_library/charting_library';
import '../../public/static/charting_library/datafeeds/udf/dist/bundle'

const chartContainerRef = useRef();
useEffect(() => {

  console.log(props)
  const widgetOptions = {
    symbol: props.widget_data.symbol,
    // BEWARE: no trailing slash is expected in feed URL
    datafeed: new window.Datafeeds.UDFCompatibleDatafeed("https://demo_feed.tradingview.com"),
    interval: props.widget_data.interval,
    container: chartContainerRef.current,
    library_path: props.widget_data.libraryPath,

    locale: getLanguageFromURL() || 'en',
    disabled_features: ['header_widget'],
    enabled_features: ['study_templates'],
    charts_storage_url: props.widget_data.chartsStorageUrl,
    charts_storage_api_version: props.widget_data.chartsStorageApiVersion,
    client_id: props.widget_data.clientId,
    user_id: props.widget_data.userId,
    fullscreen: props.widget_data.fullscreen,
    autosize: props.widget_data.autosize,
    studies_overrides: props.widget_data.studiesOverrides,
    theme: 'light',
    timezone: 'Asia/Bangkok',
    debug:true,
    width:300,
    height:600
  };

  let tvWidget = new widget(widgetOptions);
  setTvwidget(tvWidget)
  
  tvWidget.onChartReady(() => {
    tvWidget.headerReady().then(() => {
      const button = tvWidget.createButton();
      button.setAttribute('title', 'Click to show a notification popup');
      button.classList.add('apply-common-tooltip');
      button.addEventListener('click', () => tvWidget.showNoticeDialog({
        title: 'Notification',
        body: 'TradingView Charting Library API works correctly',
        callback: () => {
          console.log('Noticed!');
        },
      }));

      button.innerHTML = 'Check API';
    });
  })

  if (tvWidget !== null) {
    tvWidget.remove();
    tvWidget = null;
  }

}, [])

<div className={'p-0 lg:w-[100%] lg:h-[100vh] max-lg:w-[100%] max-lg:h-[100%] md:w-[100%] max-md:h-[100%] sm:h-[100%] max-sm:h-[100%]'}>
  <div ref={chartContainerRef} className='w-[100%] h-[100vh]'></div>
</div>

问题排查与修复方案 #

1. 参数名大小写不匹配 #

Chart.js中读取props.widget_data时用了驼峰命名，但defaultWidgetProps里是下划线命名，导致所有参数值为undefined：

• library_path vs libraryPath
• charts_storage_url vs chartsStorageUrl
• charts_storage_api_version vs chartsStorageApiVersion
• client_id vs clientId
• user_id vs userId
• studiesOverrides vs studies_overrides

修复：统一参数命名，比如在Chart.js中用正确的下划线键名读取：

const widgetOptions = {
  // ...
  library_path: props.widget_data.library_path,
  charts_storage_url: props.widget_data.charts_storage_url,
  charts_storage_api_version: props.widget_data.charts_storage_api_version,
  client_id: props.widget_data.client_id,
  user_id: props.widget_data.user_id,
  studies_overrides: props.widget_data.studiesOverrides,
  // ...
}

2. 组件销毁逻辑错误 #

useEffect中刚创建完tvWidget就执行tvWidget.remove()，直接销毁了刚初始化的图表：

修复：把销毁逻辑放到useEffect的清理函数中，组件卸载时才销毁图表：

useEffect(() => {
  let tvWidget = null;

  const initChart = () => {
    const widgetOptions = {
      // 正确的参数配置
    };
    tvWidget = new widget(widgetOptions);
    setTvwidget(tvWidget);

    tvWidget.onChartReady(() => {
      // 你的按钮逻辑
    });
  };

  initChart();

  // 清理函数：组件卸载时销毁图表
  return () => {
    if (tvWidget) {
      tvWidget.remove();
      tvWidget = null;
    }
  };
}, [props.widget_data]) // 添加依赖，props变化时重新初始化

3. Next.js动态导入问题 #

TradingView库依赖浏览器环境，需用dynamic导入Chart组件并禁用SSR：

// Dashboard.js中修改Chart的导入方式
const Chart = dynamic(() => import('./Chart'), { ssr: false });

4. 容器与自适应设置 #

autosize设为false时需确保容器有明确宽高，或设置autosize: true让图表自适应容器：

// 在widgetOptions中调整
autosize: true,

5. 库路径验证 #

检查library_path是否指向正确的TradingView库文件目录，确保目录下包含charting_library.min.js等必要文件。

内容的提问来源于stack exchange，提问作者miracle godwin