使用single-spa实现微前端踩坑指南

问题描述

最近公司的低代码编程平台上线了微前端框架，于是就想着先找个视频了解学习一下。刚开始的阶段就踩到了许多坑，下面记录一下使用single-spa实现微前端遇到的坑，如果你也有遇到同样的问题，希望可以给你一种解决问题的思路。

技术栈

single-spa搭建微前端 + react框架的微应用

踩坑1：

按照视频教程没有安装最新版本的single-spa，说是最新版本可能在开发过程中有许多bug，于是选中了2.0.3的版本。结果新版本有没有bug我不知道，这个版本创建的微前端框架运行不起来。具体错误如下图：

首先是去找了度娘，但是说法都是更新single-spa到最新版本，我。。。
网上的解决方案没有试，就尝试看一下错误信息自己解决一下。最终明白错误的原因是webpack配置项的问题，猜测可能是webpack版本问题，导致了有些配置项不识别。解决方案如下图：

最终问题解决，项目成功启动！

踩坑2：

微前端容器创建好了，接下来就是创建微应用了，我创建了一个react框架的微应用，结果访问的时候又报了下面的错误：
application ‘@study/reactapp’ died in status LOADING_SOURCE_CODE: Error loading http://localhost:9001/study-reactapp.js
网友有遇到同样的错误，但是错误出现的场景不一样，一时间不知道怎么解决。
最终请教了公司的一位大佬，才解决了报错问题，react应用也能在页面正常显示。
问题是因为，通过微前端访问react应用时，对应的微应用也要处于启动状态，否则就报了上面的错误。

这是我初学微前端阶段遇到的坑，希望可以帮到你们。