当我导入库时，SvelteKit 控制台错误“未定义窗口”

Question

我想导入使用“window”属性的 apexChart 库，但在控制台中出现错误。

[vite] Error when evaluating SSR module /src/routes/prehled.svelte:
ReferenceError: window is not defined

我尝试在挂载后使用 apexCharts，但错误并没有消失。

<script>
 import ApexCharts from 'apexcharts'
 import { onMount } from 'svelte'
 const myOptions = {...myOptions}
 onMount(() => {
   const chart = new ApexCharts(document.querySelector('[data-chart="profit"]'), myOptions)
   chart.render()
 })
</script>

当我确定浏览器存在时，我尝试导入 apexCharts。

 import { browser } from '$app/env'
 if (browser) {
   import ApexCharts from 'apexcharts'
 }

但我收到错误“'import' 和 'export' 可能只出现在顶层”

我尝试在 svelte.config.js 中禁用 ssr

import adapter from '@sveltejs/adapter-static';
const config = {
    kit: {
        adapter: adapter(),
    prerender: {
      enabled: false
    },
    ssr: false,
}

我尝试创建一个组件，我在其中导入 apexChart 库，并且我创建了一个仅在存在浏览器时才使用该组件的条件

{ #if browser }
  <ProfitChart />
{ /if }

没有任何帮助。

请问有人知道怎么帮我吗？

Answer 1

最简单的方法是在您的网页中简单地包含像独立库这样的顶点图表，如下所示：

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

然后只需在onMount中使用它：

onMount(() => {
  const chart = new ApexCharts(container, options)
  chart.render()
})

您可以在 app.html 中添加此行，也可以将其包含在 <svelte:head> 块中。

另一种方法是在 onMount 期间动态导入：

onMount(async () => {
  const ApexCharts = (await import('apexcharts')).default
  const chart = new ApexCharts(container, options)
  chart.render()
})

另外：使用 bind:this 而不是 document.querySelector 来获取 DOM 元素，这将是更“简洁”的方式。

Answer 2

我发现 Vite 插件的最后一个选项最终使用更少的代码工作得最好，但会在 vscode 中失去智能感知，并看到导入突出显示为错误（最后的临时解决方法）：https://kit.svelte.dev/faq#how-do-i-use-x-with-sveltekit-how-do-i-use-a-client-side-only-library-that-depends-on-document-or-window

1. 安装vite插件：npm i -D vite-plugin-iso-import
2. 将插件添加到 svelte.config.js：

       kit: {
          vite: {
            plugins: [
                isoImport(),
            ],

1. 将插件添加到 TypeScript 配置（如果您使用 TS）：

"compilerOptions": {
    "plugins": [{ "name": "vite-plugin-iso-import" }],

4. 照常使用，但请注意导入时的“?client”：

<script context="module">
    import { chart } from 'svelte-apexcharts?client';
    import { onMount } from 'svelte'
    let myOptions = {...myOptions}
    onMount(() => {
        myOptions = {...updated options/data}
    });
</script>

<div use:chart={myOptions} />

调试说明： 要让导入暂时不突出显示为错误，只需：

1. npm run dev，你的项目会编译好的，然后在浏览器中测试至少执行一次。
2. 立即删除?client，保存并照常继续调试。