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

Question

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

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

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

[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>

但我收到错误“‘导入’和‘导出’可能只出现在顶层”

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

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

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

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

没有任何帮助。

有人知道如何帮助我吗？

Answer 1

最简单的方法是简单地将 apexcharts 像独立库一样包含在您的网页中，如下所示：

<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#如何使用-x-with-sveltekit-如何使用依赖于文档或窗口的仅客户端库

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

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

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

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

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

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

调试注意：要使导入暂时不突出显示为错误，只需：

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