SvelteKit集成uPlot图表无法正常渲染问题求助

你的代码不需要额外做构建配置，图表渲染失败是3个写法问题导致的：

• onMount 生命周期本身只会在浏览器端执行，不需要额外引入browser做环境判断，多余的判断反而可能因为SvelteKit版本差异（新版本$app/env路径已改为$app/environment）引发编译错误。
• 用document.getElementById获取DOM节点的时机不可靠：响应式语句触发时Svelte可能还没完成DOM的最终布局，uPlot初始化时拿不到正确的容器尺寸，直接导致画布渲染失败。Svelte里获取DOM应该优先用bind:this语法，能保证节点可用时才触发后续逻辑。
• 每次触发绘图逻辑都新建uPlot实例，没有销毁旧实例，同一个容器下会堆叠多个uPlot生成的canvas、DOM节点，互相覆盖导致看不到正常图表，还会造成内存泄漏。

直接替换index.svelte内容即可，不需要修改其他配置：

<script lang="ts">
  import { onMount } from 'svelte';
  import "uplot/dist/uPlot.min.css";
  import type uPlotType from 'uplot';

  // uPlot构造函数
  let uPlot: typeof uPlotType | null = null;
  // 图表容器DOM引用
  let chartContainer: HTMLDivElement | null = null;
  // uPlot实例，用于后续更新、销毁
  let chartInstance: uPlotType | null = null;

  function drawChart() {
    // 构造函数或容器未就绪时直接返回
    if (!uPlot || !chartContainer) return;
    // 存在旧实例先销毁，避免DOM堆叠
    if (chartInstance) chartInstance.destroy();

    const data = [
      new Float32Array([1, 2, 3, 4, 5]),
      new Float32Array([1, 3, 2, 5, 4])
    ];

    const opts = {
      width: 600,
      height: 300,
      scales: { x: { time: false } },
      series: [
        { label: "x" },
        { label: "y", stroke: "red" }
      ],
    };

    chartInstance = new uPlot(opts, data, chartContainer);
  }

  onMount(async () => {
    // 动态导入uPlot，避免SSR阶段打包报错
    const uplotModule = await import('uplot');
    uPlot = uplotModule.default;
    // 组件卸载时销毁实例，避免内存泄漏
    return () => chartInstance?.destroy();
  })

  // 依赖项就绪时自动触发绘图
  $: uPlot, chartContainer, drawChart()
</script>

<h1>Welcome to SvelteKit</h1>
<div bind:this={chartContainer}></div>

• uPlot是无框架依赖的纯JS库，不需要额外配置Vite、Svelte的编译选项，安装完依赖即可直接使用。
• 如果需要动态更新数据，直接调用chartInstance.setData(newData)即可，不需要每次重新初始化实例。
• 如果需要自适应容器宽度，可以监听容器尺寸变化后调用chartInstance.setSize()更新尺寸，不需要硬编码width值。

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