MSW 无法在 tanstack router loader 首次加载时 mock APIS

关于tanstack router中使用msw所遇到的问题

今天在使用msw进行数据mock时发现一个问题，就是使用loader时，msw会无法正常拦截到请求而导致非预期的问题的出现，在我调试了一段时间和查阅了资料后发现

msw的初始化发生在loader的加载后，这也导致了loader加载时，msw并没有初始化

这就导致了一个有趣的现象，就是你从其他路由跳转到目标路由页面时是可以正常获取loader中的数据的，但是当你对该页面进行刷新是，就会出现报错了，并且无法获取到mockapi中的数据

而解决方法也非常的简单

import "./theme/tailwind.css";
import { createRoot } from "react-dom/client";
import App from "./App.tsx";
import "./theme/index.css";
import { StrictMode } from "react";
import { worker } from "./mocks/index.ts";

worker
  .start({
    onUnhandledRequest: "bypass",
    serviceWorker: {
      url: import.meta.env.VITE_MSW_URL,
    },
  })
  .then(() => {
    createRoot(document.getElementById("root")!).render(
      <StrictMode>
        <App />
      </StrictMode>
    );
  });

这样可以保证，在msw正确初始化后在执行root的渲染