Remix迁移Vite时路由配置报错：You must provide a non-empty routes array to createStaticHandler

我太懂你这种迁移时踩坑的烦躁了——用着不稳定的Vite插件，还得纠结路由配置的写法，最后还碰上个“必须提供非空路由数组”的报错，简直头大！

咱先拆解下这个报错的核心原因：你提到用了Promise.resolve来处理路由，这大概率是问题的关键。当前Remix的unstable_vitePlugin并不支持异步的路由定义，如果你把路由配置包裹在Promise里，插件拿到的就不是实际的路由数组，而是一个未解析的Promise，自然就会判定路由数组为空，抛出这个错误。

接下来给你几个具体的解决步骤：

1. 移除Promise.resolve，同步返回路由配置 #

直接用defineRoutes回调来定义并返回路由，不要搞异步那套。正确的写法应该是这样：

remix({
  ignoredRouteFiles: ["**/*.css"],
  routes(defineRoutes) {
    // 直接返回defineRoutes的执行结果，不用Promise包裹
    return defineRoutes((route) => {
      // 这里按照你的项目需求添加路由，比如：
      route("/", "routes/_index.tsx");
      route("/about", "routes/about.tsx");
      // 其他自定义路由...
    });
  },
}),

2. 修正后的完整vite.config.ts示例 #

把你的配置文件改成下面这样，确保路由部分是同步的：

import { unstable_vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";
import { remixDevTools } from "remix-development-tools";
import { installGlobals } from "@remix-run/node";
import tsconfigPaths from "vite-tsconfig-paths";

installGlobals();

export default defineConfig({
  server: {
    port: 3000,
  },
  plugins: [
    remixDevTools(),
    remix({
      ignoredRouteFiles: ["**/*.css"],
      routes(defineRoutes) {
        return defineRoutes((route) => {
          // 替换成你实际的路由定义
          route("/", "routes/_index.tsx");
          route("/dashboard", "routes/dashboard.tsx");
        });
      },
    }),
    tsconfigPaths(),
  ],
});

3. 额外排查点 #

• 检查你的routes目录下有没有实际的路由文件，别被ignoredRouteFiles误排除了（你现在只排除了.css，这点没问题）
• 确认路由路径和文件路径没有拼写错误，比如把routes/about.tsx写成route/about.tsx这种低级错误
• 如果之前有自定义的路由逻辑，确保全都是同步执行的，不要混入异步操作

虽然目前只能用unstable_vitePlugin，但只要遵循同步路由配置的规则，基本就能解决这个报错啦。等官方推出稳定版插件后记得及时升级哦！

备注：内容来源于stack exchange，提问作者Ahmed