添加vite-plugin-mix后Vite Dev Server启动失败求助

问题原因 #

报错TypeError: mix is not a function的核心原因是vite-plugin-mix v0.4.0采用命名导出，而非你代码中使用的默认导出，导致导入的mix不是可执行函数。

修复步骤 #

1. 修改vite.config.js中的导入语句，将默认导入改为命名导入：

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
// 替换原默认导入为命名导入
import { mix } from "vite-plugin-mix";

export default defineConfig({
  plugins: [
    react(),
    mix({
      handler: "./api.js",
    }),
  ],
});

2. 确保你的api.js文件符合插件要求的格式（若未创建可参考示例）：

export default function handler(req, res) {
  // 编写你的API逻辑
  res.status(200).json({ message: "Hello from API" });
}

3. 重新执行npm run dev，开发服务器即可正常启动。

附原问题信息 #

终端输出

vite-project@0.0.0 dev
vite

failed to load config from /Users/name/mcsp/10-week/vite-project/vite.config.js
error when starting dev server:
TypeError: mix is not a function
at file:///Users/name/mcsp/10-week/vite-project/vite.config.js.timestamp-1683393633808-70a3d4c91bf2b.mjs:8:5
at ModuleJob.run (node:internal/modules/esm/module_job:194:25)

Package.json

{
  "name": "vite-project",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "vite-plugin-mix": "^0.4.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "@vitejs/plugin-react": "^4.0.0",
    "cors": "^2.8.5",
    "dotenv": "^16.0.3",
    "eslint": "^8.38.0",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.3.4",
    "express": "^4.18.2",
    "pg": "^8.10.0",
    "vite": "^4.3.2"
  }
}

vite.config.js

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import mix from "vite-plugin-mix";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    mix({
      handler: "./api.js",
    }),
  ],
});

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