Vite模块加载器缺失文件扩展名：SvelteKit第三方库导入报错求助

方案1：自定义Vite插件动态补全扩展名 #

Vite对项目内文件的导入会自动补全扩展名，但对node_modules中的第三方库文件遵循严格的ESM规范，不会自动补全。可以写一个简单的Vite插件，在编译阶段给目标文件的缺失扩展名补上.js：

// vite.config.js
import { sveltekit } from '@sveltejs/kit/vite';

const fixMissingExtensions = {
  name: 'fix-missing-extensions',
  transform(code, id) {
    // 仅处理目标第三方库的相关文件，避免影响其他代码
    if (!id.includes('node_modules/some-lib/dist/foo')) return code;
    
    // 匹配导出语句中的相对路径，补全缺失的.js扩展名
    return code.replace(
      /export \* from ['"]\.\/([^'"]+)['"]/g,
      (match, pathSegment) => {
        // 如果路径已有扩展名则跳过
        if (pathSegment.includes('.')) return match;
        return `export * from './${pathSegment}.js'`;
      }
    );
  }
};

export default {
  plugins: [sveltekit(), fixMissingExtensions]
};

把这个插件加入Vite配置后，开发服务器和生产构建时都会自动修正第三方库的导出语句，无需修改原文件。

方案2：用patch-package生成持久补丁 #

如果需要长期维护这个修改，且要和团队共享，可以用patch-package给第三方库打补丁，补丁文件会存入项目仓库，每次安装依赖后自动应用：

1. 安装依赖：

npm install patch-package --save-dev

2. 手动修改node_modules/some-lib/dist/foo/index.js，补上缺失的.js扩展名：

export * from './some-component.js'

3. 生成补丁文件：

npx patch-package some-lib

4. 在package.json的scripts中添加自动应用补丁的命令：

{
  "scripts": {
    "postinstall": "patch-package"
  }
}

之后每次执行npm install，补丁都会自动应用到第三方库文件上，无需重复手动修改。

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