webpack 5 - when i update to webpack5, there is a error: configuration has an unknown property 'before'

Question

when I update webpack 4 to 5, the error exits.

I have a webpackDevServer.js which include the error message 'error'

// webpackDevServer.js
module.exports = function(proxy, allowedHost) {
    return {
        before(app, server) {
            if (fs.existsSync(paths.proxySetup)) {
                // This registers user provided middleware for proxy reasons
                require(paths.proxySetup)(app);
            }

            // This lets us fetch source contents from webpack for the error overlay
            app.use(evalSourceMapMiddleware(server));
            // This lets us open files from the runtime error overlay.
            app.use(errorOverlayMiddleware());

            // This service worker file is effectively a 'no-op' that will reset any
            // previous service worker registered for the same host:port combination.
            // We do this in development to avoid hitting the production cache if
            // it used the same host and port.
            // https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432
            app.use(noopServiceWorkerMiddleware());
        },
    };
};

I use the above file in a start.js file, when I run the project, I type node scripts/start.js

// start.js
...
const createDevServerConfig = require('../config/webpackDevServer.config');
...
const serverConfig = createDevServerConfig(
      proxyConfig,
      urls.lanUrlForConfig
);
const devServer = new WebpackDevServer(compiler, serverConfig);

then it throws an error

configuration has an unknown property 'before'. These properties are valid:
object { bonjour?, client?, compress?, dev?, firewall?, headers?, historyApiFallback?, host?, hot?, http2?, https?, injectClient?, injectHot?, liveReload?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, openPage?, overlay?, port?, proxy?, public?, setupExitSignals?, static?, stdin?, transportMode?, useLocalIp? }

here is my package.json

"webpack": "^5.20.2",
"webpack-dev-server": "^4.0.0-beta.0",
"webpack-manifest-plugin": "2.0.4",
"workbox-webpack-plugin": "^6.1.0"

question from:https://stackoverflow.com/questions/66061020/when-i-update-to-webpack5-there-is-a-error-configuration-has-an-unknown-proper

Answer 1

fxxk, I'm stupid, when i search some key word (eg: onBeforeSetupMiddleware), I found the github of webpack-dev-server which tell the changes in new version 4.0.0 beta. https://github.com/webpack/webpack-dev-server/releases