「React」React Router v7 framework qiankun window is not defined

前言

官网如是说：创建一个 React 项目，我们推荐从一个框架开始。

我"照本宣科"，咔咔一顿操作重构了用户登录、管理中心...一切看起来很顺利，就连 DOM 的 ts + ESLint 校验也尽可能妥善处理了。

鉴于管理中心需要分流的子业务系统比较多，也便于后续团队成员加入，我很自然的想到用微前端架构。

其实在这之前，已经采用 monorepo 架构尝试了一下 ------ 当前人手有限，一个仓库梭哈所有项目，开发效率没得说，但是稍微考虑后面项目体量会随着需求量增加而增加，未来要加入的小伙伴能力梯度等因素，多少觉得不是很保险，比如：项目权限控制、项目稳定性...这也是上面提到的"重构"的来由。

所以借由这个档口，果断迟痛不如早痛，换方案！

多个子业务系统，统一入口，再加上有一个分流入口，很明显这些内容归属于主应用范畴。很快，主应用已就绪。

所谓"万事开头难"，第一步我已经换着花样走了两遍了，接下来就是依葫芦画瓢搭建子应用了。

npx create-react-router@latest

嗯，一口气出来了2个子应用。

至此，物料已就位，是时候引入微应用相关了。考虑之前公司有项目有用过 qiankun，再对比下其他微前端框架，嗯，适当控制下学习量，此次选了认识但之前没机会深入了解的 qiankun。

过程

综上，截至目前涉及到的技术有 React Router v7（因为是框架，内置 vite 打包构建工具及其他）, qiankun.

第一步 ：主应用本地启动起来...子应用 A, B 本地跑起来...✌一切顺利。 第二步：主应用安装 qiankun，为注册子应用做准备... ✌一切顺利。

pnpm add --save qiankun

第三步：主应用使用 qiankun 提供的 API 开始注册子应用...

import { registerMicroApps, start } from "qiankun";

Ops!!! 主应用报错了 ------ window is not defined.

第一反应，上官网找相关说明、GitHub issue 输入关键信息找同伴、AI 求助、百度拆盲盒...

1. React Router v7 默认 ssr 渲染，那就关掉呗

   // react-router.config.ts
   export default {
     // Config options...
     // Server-side render by default, to enable SPA mode set this to `false`
     ssr: false,
   } satisfies Config;

   无效。

   GitHub 如是说，为了更快的渲染效率，即使 ssr: false，也会先在 Node 服务解析部分内容。

   好巧不巧，import 在内。

2. 看到有类似情况，应该有可以借鉴的思路吧，进去看看...

   

   喔，useEffect 缓冲下...可我这里是直接 import 就触发报错了的。

   哈，看题主动态导入有解决，我也来试试

   useEffect(() => {
       if(typeof window !== undefined){
         const { registerMicroApps,start } = require('qiankun');
         registerMicroApps([]);
         start();
       }    
   }, []);

   不好，window 是不报 not defined 了，变 require is not defined 了。但是动态导入直觉可行，React Router v7 应该是另外的写法，再试试 💪（总比现在换 Next.js 再来一次重构要快吧...）

尾声

React Router v7 中的动态导入 ：通过动态导入的方式延迟加载 qiankun 模块，直到确定是在浏览器环境中运行时再进行导入。这种方式可以避免在服务端渲染阶段就尝试访问 window 对象。例如：

useEffect(() => {
 import('qiankun').then(({ registerMicroApps, start }) => {
   // 在这里注册和启动你的微应用
 });
}, []);

此法亲测可行，记录如此。🖊

当然，应该还有其他可行方案。鄙人着急琢磨主应用与子应用的通信，其他方案就交由有兴趣的小伙伴去探索来分享了。😀