Unocss：“unocss/vite“ resolved to an ESM file.ESM file cannot be loaded by `require`

一、问题描述

在配置unocss后，运行pnpm run dev时，报错如下：

 [ERROR] "unocss/vite" resolved to an ESM file. ESM file cannot be loaded by `require`. See http://vitejs.dev/guide/troubleshooting.html#this-package-is-esm-only for more details. [plugin externalize-deps]

    node_modules/.pnpm/esbuild@0.18.20/node_modules/esbuild/lib/main.js:1373:27:
      1373 │         let result = await callback({

二、解决方案

unocss0.59.x已经不支持commonjs了，仅仅支持ESM（只使用 ESM 来管理模块依赖，不再支持 CommonJS 或 AMD 等其他模块化方案），可以查看《unocss的发布变更日志》：

那么，我们可以尝试以下方法：

1.方法一：
可以参考《This package is ESM only》文档说明：

将vite.config.ts 文件名改为 vite.config.mts，再重新运行命令即可。

2.方法二：

// vite.config.ts

export default async () => {
  const UnoCSS = (await import('unocss/vite')).default

  return defineConfig({
    plugins: [
      UnoCSS(),
    ],
  })
}

3.方法三：
将unocss版本 降至 v0.58.9及以下。