Invalid `transportMode` in frontend-build package

Tips & Tricks - Public
1

This is an experience caused by a webpack version update in frontend-build repository, as I was trying to setup the frontend-app-learning MFE (master), and out-of-the-box I ran into the following error

1% setup initialize[webpack-cli] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
edx.devstack.frontend-app-learning |  - options has an unknown property 'transportMode'. These properties are valid:
edx.devstack.frontend-app-learning |    object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, setupExitSignals?, static?, watchFiles?, webSocketServer? }
edx.devstack.frontend-app-learning | npm ERR! code ELIFECYCLE
edx.devstack.frontend-app-learning | npm ERR! errno 2
edx.devstack.frontend-app-learning | npm ERR! @edx/frontend-app-learning@1.0.0-semantically-released start: `fedx-scripts webpack-dev-server --progress`
edx.devstack.frontend-app-learning | npm ERR! Exit status 2

Later while reviewing the packages, I found out, thanks @Fox for the suggestion, that it was related to the webpack version being updated in frontend-build to 5.50.0, this version of webpack does not support the transportMode attribute, so the solution here(at least until they fix it) would be to manually go to the node_modules and search for the frontend-build package, and change the webpack config file, replacing the transportMode attribute with webSocketServer.
Now, while I am not sure if this is a correct fix, this unblocked me so I could continue working on my dev tasks.

3 Likes
2

Sometimes in situations like these, I’ve found it worth trying to delete node_modules and reinstall from scratch. It has often helped. Though in this case, since you were setting things up for the first time, it might not have worked. I suspect this is just a temporary glitch and will be fixed soon, sine frontend-build is used by all MFEs and an issue like this will break all of them.

2 Likes