webpack 5 migration - dev server - 404 error - Cannot GET "/"

Question

I have a legacy React app which is should be updated from 16 to 17, webpack from v3 to v5 and babel. I had followed the offical webpack migration guides for deprecated plugins and configurations. However I cannot run the app on local server.

The result is "Cannot GET /", 404 on networking for (0.0.0.0). On console logs;

Unchecked runtime.lastError: The message port closed before a response was received. http://0.0.0.0:8888/

Failed to load resource: the server responded with a status of 404 (Not Found) http://0.0.0.0:8888/

After reading dozens of guides and stackoverflow, tried setting publicPath to "/" which resulted blank page, but 200 for 0.0.0.0 . On console logs;

(index):12 Uncaught ReferenceError: lamono is not defined at (index):12 at (index):17

Unchecked runtime.lastError: The message port closed before a response was received. http://0.0.0.0:8888/

This react app is part of a php app, just responsible for small part of it.

Here is the files (only the parts I considered necessary);

webpack.common.js

const path = require('path')
process.traceDeprecation = true
module.exports = {
    entry: {
        app: [
            './src/index.js',
        ],
        // copy lamono mock (pretty much only for testing, though)
        lamono: './test/mocks/lamono.js',
    },

    output: {
        path: path.resolve(__dirname, 'dist'),
        publicPath: 'vendor/assets/dist',
        filename: '[name].js',
    },

    module: {
        rules: [
            ...
        ],
    },

    resolve: {
        extensions: [
            '.js',
            '.jsx',
        ],
        alias: {
            modernizr$: path.resolve(__dirname, './.modernizrrc.js'),
        },
        fallback: {
            stream: require.resolve('stream-browserify'),
            buffer: require.resolve('buffer'),
        },
    },

    plugins: [
        ...
    ],
}

webpack.dev.js

const fs = require('fs')
const path = require('path')
const webpack = require('webpack')
const common = require('./webpack.common')

module.exports = merge(common, {

    // see https://webpack.js.org/configuration/devtool/ for possible values and meanings
    devtool: 'eval-cheap-module-source-map',

    mode: 'development',
    devServer: {
        historyApiFallback: {
            index: `${common.output.publicPath}index.html`,
        },
        disableHostCheck: true,
        writeToDisk: true,
        port: 8888,
        host: '0.0.0.0',
        hot: true,
        compress: true,
        openPage: '/vendor',
        publicPath: common.output.publicPath,
        contentBase: path.resolve(__dirname, './dist'),
        proxy: [ ... ]
    },
    plugins: [ ...
    ],
})

package.json

{
  "private": true,
  "scripts": {
    "startdev": "webpack serve --config webpack.dev.js",
  },
  "devDependencies": {
    "webpack": "^5.37.0",
    "webpack-cli": "^4.7.0",
    "webpack-dev-server": "^3.11.2",
    "webpack-merge": "^5.7.3",
    "webpack-modernizr-loader": "^5.0.0",
    "webpack-version-file": "^0.1.6"
  },
}

src/index.js

import './app/polyfills'
import { setLocale } from 'react-redux-i18n'

import mountApp from './app/mountApp'
import appendFallbackContent from './fallback/actions'
import store from './app/store'
import { toRouteFilterName } from './master/routing'
import { setRouteFilter } from './master/actions'
import { setUserData } from './menu/sidebar/actions'
import {
    updateLanguage,
    updateToken,
    updateStoreCode,
} from './app/axios'
import buildConfig from '../config.build.json'

window.lamono.linkVendorApp = (
    appElementId,
    language,
    magentoStoreCode,
    legacyElementIds,
    getElById,
    vendorData,
) => {
    const el = getElById(appElementId)
    const routeFilter = toRouteFilterName(buildConfig.env)
    const supportsHistory = 'pushState' in window.history
    const changePageOnLink = !supportsHistory

    store.dispatch(setLocale(language))
    store.dispatch(setRouteFilter(routeFilter))

    updateToken()
    updateLanguage(language)
    updateStoreCode(magentoStoreCode)

    if (vendorData) {
        const vendorAction = setUserData(vendorData)
        store.dispatch(vendorAction)
    }

    if (legacyElementIds) {
        const fallbackAction = appendFallbackContent(legacyElementIds, getElById)
        store.dispatch(fallbackAction)
    }

    mountApp(el, changePageOnLink)
}

src/index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Vendor Portal</title>
</head>
<body>
    <div class="app-wrapper" id="vendorApp"></div>
    <script>
        (function () {
            lamono.linkVendorApp('vendorApp', 'en', 'us', null, function (id) {
                return document.getElementById(id);
            }, {
                name: 'Some Vendor',
            });
        }());
    </script>
</body>
</html>

Monody