自建Vite插件NPM包含默认导出却报'default'导出缺失错误求助

错误场景 #

开发首个Vite插件NPM包，原代码与项目同库，现已拆分独立。在示例项目执行npm run dev时触发如下错误：

failed to load config from C:\Users\cjime\Desktop\Open Source Projects\Vite.NET\dotnet-vite\ClientApp\vite.config.ts
error when starting dev server:
file:///C:/Users/cjime/Desktop/Open%20Source%20Projects/Vite.NET/dotnet-vite/ClientApp/vite.config.ts.timestamp-1674663682047.mjs:4
import ViteDotNet from "file:///C:/Users/cjime/Desktop/Open%20Source%20Projects/Vite.NET/dotnet-vite/ClientApp/node_modules/vite-dotnet/lib/index.js";
       ^^^^^^^^^^
SyntaxError: The requested module 'file:///C:/Users/cjime/Desktop/Open%20Source%20Projects/Vite.NET/dotnet-vite/ClientApp/node_modules/vite-dotnet/lib/index.js' does not provide an export named 'default'

插件源码（含默认导出） #

import type { UserConfig } from 'vite';
import { basename, posix } from 'path';

export type PluginConfig = {
  port: number;
  appFolder: string;
  entrypoint: string;
  prodServerOrigin?: string; // 初始版本暂不支持，用于将资源托管在S3或Azure Blob等远程服务器的场景
}

function outputOptions (assetsDir: string) {
  // 内部方法：避免不必要的入口文件嵌套
  const outputFileName = (ext: string) => ({ name }: { name: string }) => {
    const shortName = basename(name).split('.')[0]
    return posix.join(assetsDir, `${shortName}.[hash].${ext}`)
  }

  return {
    entryFileNames: outputFileName('js'),
    chunkFileNames: outputFileName('js'),
    assetFileNames: outputFileName('[ext]'),
  }
}

export default function ViteDotNetPlugin(entrypoint: string, port: number = 5173, appFolder: string = "ClientApp") {
  return ViteDotNet({ port, appFolder: appFolder, entrypoint: entrypoint });
}

function ViteDotNet(config: PluginConfig) {
  return {
    name: 'ViteDotNet',
    enforce: "post" as const,
    config: (userConfig: UserConfig/*, { command, mode }*/) => {
      return {
        server: {
          origin: `http://localhost:${config.port}`,
          hmr: {
            protocol: 'ws'
          }
        },
        build: {
          outDir: `../wwwroot`,
          emptyOutDir: false,
          manifest: `${config.appFolder}/manifest.json`,
          rollupOptions: {
            // 覆盖默认的.html入口
            input: config.entrypoint,
            output: outputOptions(config.appFolder)
          }
        }
      }
    }
  };
};

package.json配置 #

{
  "name": "vite-dotnet",
  "version": "0.2.8",
  "description": "Integration plugin for ASP.NET Core and ViteJS",
  "main": "lib/index.js",
  "keywords": [
    "vite",
    "vite-integration",
    "react",
    "svelte",
    "vue",
    "solidjs",
    "lit"
  ],
  "repository": {
    "type": "git",
    "url": "git+https://github.com/techgems/Vite.NET"
  },
  "type": "module",
  "files": ["lib/**/*"],
  "types": "lib/index.d.ts",
  "author": "TechGems",
  "license": "MIT",
  "scripts": {
    "build": "tsc"
  },
  "devDependencies": {
    "@types/node": "^18.11.18",
    "tslib": "^2.4.0",
    "typescript": "^4.6.4",
    "vite": "^3.2.3"
  }
}

排查建议 #

1. 检查TypeScript编译配置：确认tsconfig.json中module字段设为ESNext或ES6+，moduleResolution设为NodeNext或Node16，同时declaration设为true。如果编译时用了CommonJS模块系统，源码的export default会被编译成module.exports，ESM环境下无法通过import xxx from识别。
2. 验证编译产物：直接查看lib/index.js的内容，确认是否存在export default ViteDotNetPlugin语句。如果是module.exports = ...，说明TS配置的模块系统不兼容ESM，需要调整。
3. 临时适配方案：若暂时无法修改编译配置，可在vite.config.ts中改用以下导入方式：

   import * as ViteDotNet from 'vite-dotnet'
   // 使用时调用ViteDotNet.default
   export default defineConfig({
     plugins: [ViteDotNet.default('entrypoint')]
   })
   

   但这只是临时 workaround，建议优先从TS编译配置层面解决问题。

内容的提问来源于stack exchange，提问作者Carlos Jimenez Bermudez