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

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

Answer 1

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

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.

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.

Answer 4

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