Unable to start a micro front-end app in single-SPA application

Question

I am facing error while trying to start sub-app in Single-SPA application. Basically, I am trying to develop a kind of util app (sub app in Single-SPA) which contains Sockjs, Stomp-client etc. I have removed node modules and package-lock.json and installed node modules again. When I try to start application I am facing below error.

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? }

Command used for running the app : 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"
  }
}

Bonnell

Did one of the answers help you? – Salaam

Answer 1

I resolved this problem by updating "webpack-config-single-spa-ts" from 2.0.0 to 3.0.0.

Encourage

Answer 2

The firewall option has been renamed as of webpack-dev-server v4.0.0-rc.0

You should use allowedHosts instead of firewall.

This problem has been fixed in version 4.0.0 of webpack-config-single-spa , so upgrading this package will fix your issue as well.

Salaam

Answer 3

I had the same situation in React. The package.json file for the project had:

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

Therefore, when I executed

npm i

npm installed the exact required version of this component (2.0.0). It is possible to verify the installed version, if you look under

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

I manually deleted the folder webpack-config-single-spa-react. Edited the package.json in my project to request a version above 3.0.0:

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

executed "npm install"

verified that at least version 3.0.0 of the package was installed by looking at:

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

The actions above resolved the problem.

Baryon

Answer 4

Modify in your package.json this module webpack-dev-server to 4.0.0-beta.0 and rebuild.

My versions: packages

Scarlet

^v4.0.0-beta.0 means it can be upgraded to v4.0.0-rc.0, so this answer will not work. – Salaam

Please don't use screenshots when sharing text. – Salaam