单SPA应用无法启动微前端应用答案

【问题标题】：Unable to start a micro front-end app in single-SPA application单SPA应用无法启动微前端应用
【发布时间】：2021-07-21 13:30:38
【问题描述】：

尝试在 Single-SPA 应用程序中启动子应用程序时遇到错误。基本上，我正在尝试开发一种包含 Sockjs、Stomp-client 等的 util 应用程序（Single-SPA 中的子应用程序）。我已经删除了节点模块和 package-lock.json 并再次安装了节点模块。当我尝试启动应用程序时，我遇到了以下错误。

Error:
[webpack-cli] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'firewall'. These properties are valid:
   object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, setupExitSignals?, static?, watchFiles?, webSocketServer? }
 - options.client has an unknown property 'host'. These properties are valid:
   object { logging?, overlay?, progress?, webSocketTransport?, webSocketURL? }

用于运行应用程序的命令：npm start

package.json

{
  "name": "@sudeep/livedoc",
  "scripts": {
    "start": "webpack serve",
    "start:standalone": "webpack serve --env standalone",
    "build": "webpack --mode=production",
    "analyze": "webpack --mode=production --env analyze",
    "lint": "eslint src --ext js,ts,tsx",
    "format": "prettier --write .",
    "check-format": "prettier --check .",
    "prepare": "husky install",
    "test": "cross-env BABEL_ENV=test jest --passWithNoTests",
    "watch-tests": "cross-env BABEL_ENV=test jest --watch",
    "coverage": "cross-env BABEL_ENV=test jest --coverage"
  },
  "devDependencies": {
    "@babel/core": "^7.14.6",
    "@babel/eslint-parser": "^7.14.7",
    "@babel/plugin-transform-runtime": "^7.14.5",
    "@babel/preset-env": "^7.14.7",
    "@babel/preset-typescript": "^7.14.5",
    "@babel/runtime": "^7.14.6",
    "babel-jest": "^27.0.5",
    "concurrently": "^6.2.0",
    "cross-env": "^7.0.3",
    "eslint": "^7.29.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-config-ts-important-stuff": "^1.1.0",
    "eslint-plugin-prettier": "^3.4.0",
    "husky": "^6.0.0",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^27.0.5",
    "jest-cli": "^27.0.5",
    "prettier": "^2.3.2",
    "pretty-quick": "^3.1.1",
    "ts-config-single-spa": "^2.0.1",
    "typescript": "^4.3.4",
    "webpack": "^5.40.0",
    "webpack-cli": "^4.7.2",
    "webpack-config-single-spa": "^4.0.0",
    "webpack-config-single-spa-ts": "^2.2.2",
    "webpack-dev-server": "^3.11.2",
    "webpack-merge": "^5.8.0"
  },
  "dependencies": {
    "@types/jest": "^26.0.23",
    "@types/systemjs": "^6.1.0",
    "@types/webpack-env": "^1.16.0",
    "fast-json-patch": "3.0.0-1",
    "rxjs": "6.6.0",
    "stompjs": "2.3.3",
    "sockjs-client": "1.5.0"
  }
}

【问题讨论】：

其中一个答案对您有帮助吗？

标签： npm webpack webpack-dev-server single-spa

【解决方案1】：

我通过将“webpack-config-single-spa-ts”从 2.0.0 更新到 3.0.0 解决了这个问题。

【讨论】：

【解决方案2】：

firewall 选项自 webpack-dev-server v4.0.0-rc.0 起为 renamed

您应该使用allowedHosts 而不是firewall。

这个问题在webpack-config-single-spa 的4.0.0 版本中一直是fixed，所以升级这个包也可以解决你的问题。

【讨论】：

【解决方案3】：

在您的 package.json 中将此模块 webpack-dev-server 修改为 4.0.0-beta.0 并重新构建。

我的版本： packages

【讨论】：

^v4.0.0-beta.0 表示可以升级到v4.0.0-rc.0，所以这个答案不起作用。
分享文字时请不要使用截图。

【解决方案4】：

我在 React 中遇到了同样的情况。该项目的 package.json 文件有：

"webpack-config-single-spa-react": "2.0.0",

因此，当我执行时

npm i

npm 安装了该组件所需的确切版本 (2.0.0)。如果您查看以下内容，则可以验证已安装的版本

./node_modules/webpack-config-single-spa-react/package.json

我手动删除了 webpack-config-single-spa-react 文件夹。在我的项目中编辑了 package.json 以请求 3.0.0 以上的版本：

"webpack-config-single-spa-react": "^3.0.0",

执行“npm install”

通过查看以下内容确认至少安装了 3.0.0 版的软件包：

./node_modules/webpack-config-single-spa-react/package.json

以上操作解决了问题。

【讨论】：