升级Svelte 5后Vite无法检测导入模块的问题求助

我们的项目基于Rails、Vite和Svelte，升级到Svelte 5后，导入项目内或node_modules中的组件时频繁报错Uncaught ReferenceError: Component is not defined。示例代码如下：

<script lang="ts">
import Component from "./Component.svelte"
import Plus from "lucide-svelte"

// Component // 取消注释这行就能正常运行
Plus // 这个组件能正常加载
</script>

<Component />

<button><Plus /></button>

当前Vite配置：

import { defineConfig } from "vite"
import RubyPlugin from "vite-plugin-ruby"
import path from "path"
import { svelte } from "@sveltejs/vite-plugin-svelte"
import FullReload from "vite-plugin-full-reload"
import tailwindcss from "@tailwindcss/postcss"

export default defineConfig({
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./app/frontend"),
      "@images": path.resolve(__dirname, "./app/frontend/images"),
      $app: path.resolve(__dirname, "./app/frontend"),
      $images: path.resolve(__dirname, "./app/frontend/images")
    }
  },
  plugins: [
    RubyPlugin(),
    svelte({
      inspector: true,
      prebundleSvelteLibraries: true
    }),
    FullReload(["config/routes.rb", "app/views/**/*"])
  ],
  build: {
    chunkSizeWarningLimit: 1600
  },
  css: {
    postcss: {
      plugins: [tailwindcss]
    }
  }
})

问题原因 #

这是Svelte 5的Tree Shaking优化导致的——当编译器检测到导入的组件仅在模板中使用，没有在<script>块中被显式引用时，会错误地将其视为未使用代码进行摇树，最终导致运行时找不到组件定义。示例中Plus因为有一行显式引用所以能正常加载，而Component没有就被摇掉了。

解决方案 #

• 方案1：禁用摇树优化
  修改Vite配置中的svelte插件选项，添加compilerOptions关闭摇树：

  svelte({
    inspector: true,
    prebundleSvelteLibraries: true,
    compilerOptions: {
      treeshake: false // 关闭摇树优化
    }
  })
  

  这个方法简单直接，但会牺牲部分打包体积优化。

• 方案2：显式标记组件为已使用
  在<script>块中添加一行对组件的空引用，让编译器知道它被使用了：

  <script lang="ts">
  import Component from "./Component.svelte"
  import Plus from "lucide-svelte"
  
  // 显式标记组件为已使用
  Component;
  Plus;
  </script>
  

  这种方法保留摇树优化，仅针对单个组件做兼容处理。

• 方案3：升级插件到最新版本
  Svelte 5刚发布时，@sveltejs/vite-plugin-svelte可能存在兼容性bug，更新到适配Svelte 5的最新版本，多数摇树相关问题已被修复。

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