使用simple-svelte-autocomplete出现文件未找到错误的技术求助

问题详情 #

已通过npm install完成simple-svelte-autocomplete组件安装，仅在Filter.svelte文件中引用组件：

<script>
  import AutoComplete from 'simple-svelte-autocomplete';
  // ... 其他业务代码
</script>

<AutoComplete ...></AutoComplete>

运行npm run dev或构建项目时，触发如下错误：

Error: Not found: /myproject/SimpleAutocomplete.svelte
at resolve (/myproject_dir/node_modules/@sveltejs/kit/src/runtime/server/respond.js:480:13)
at resolve (/myproject_dir/node_modules/@sveltejs/kit/src/runtime/server/respond.js:282:5)
at Object.#options.hooks.handle (/myproject_dir/node_modules/@sveltejs/kit/src/runtime/server/index.js:56:56)
at Module.respond (/myproject_dir/node_modules/@sveltejs/kit/src/runtime/server/respond.js:279:40)
at runMicrotasks ()
at processTicksAndRejections (node:internal/process/task_queues:96:5)

其中/myproject为项目路由名称，组件文件实际存在于/myproject_dir/node_modules/simple-svelte-autocomplete/src/SimpleAutocomplete.svelte，且组件功能正常，但需消除该错误避免潜在问题。

解决方案 #

• 直接导入组件具体文件
  组件内部可能存在路径引用错误，导致Svelte Kit路由解析器误判文件位置。尝试跳过包名导入，直接指定组件文件路径：

  import AutoComplete from 'simple-svelte-autocomplete/src/SimpleAutocomplete.svelte';
  

• 配置Vite优化依赖
  在项目根目录的svelte.config.js中，将组件包加入Vite优化依赖列表，确保解析器正确识别包内文件：

  import adapter from '@sveltejs/adapter-auto';
  
  /** @type {import('@sveltejs/kit').Config} */
  const config = {
    kit: {
      adapter: adapter(),
      vite: {
        optimizeDeps: {
          include: ['simple-svelte-autocomplete']
        }
      }
    }
  };
  
  export default config;
  

• 清理缓存并重装依赖
  执行以下命令清理缓存与旧依赖，排除缓存导致的解析异常：

  rm -rf node_modules package-lock.json
  npm install
  npm run dev -- --clear
  

• 调整组件版本
  组件与当前Svelte Kit版本可能存在兼容性问题，尝试升级或降级组件版本：

  # 升级至最新稳定版
  npm install simple-svelte-autocomplete@latest
  # 或指定兼容版本（可查看包历史版本选择）
  npm install simple-svelte-autocomplete@x.x.x
  

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