Bug report

What is the current behavior?
When bundled files are served publicly, any code inside the index.js (entry point for bundle) does not execute or run. However, all imports into index.js which include functions run with no problem. When bundle is served using webpack-dev-server, there is no problem there. To test, I deleted all the code in index.js and wrote a console.log() inside a function. The function did not execute at all.

The following error is thrown:

in.54452d4fe8f830e3.js:2 Uncaught (in promise) TypeError: c[t] is not a function
    at l (main.54452d4fe8f830e3.js:2:44054)
    at main.54452d4fe8f830e3.js:2:42746
    at l.a (main.54452d4fe8f830e3.js:2:44555)
    at 131 (main.54452d4fe8f830e3.js:2:42615)
    at l (main.54452d4fe8f830e3.js:2:44054)
    at main.54452d4fe8f830e3.js:2:47290
    at main.54452d4fe8f830e3.js:2:47298
l

Looking into the bundled file where the error is:

 function l(t) {
        var e = u[t];
        if (void 0 !== e)
            return e.exports;
        var n = u[t] = {
            exports: {}
        };
        return c[t](n, n.exports, l),
        n.exports
    }
    l.m = c,
    t = "function" == typeof Symbol ? Symbol("webpack queues") : "__webpack_queues__",
    e = "function" == typeof Symbol ? Symbol("webpack exports") : "__webpack_exports__",
    n = "function" == typeof Symbol ? Symbol("webpack error") : "__webpack_error__",
    r = t=>{
        t && !t.d && (t.d = 1,
        t.forEach((t=>t.r--)),
        t.forEach((t=>t.r-- ? t.r++ : t())))
    }
    ,

The imports include files that use top-level await. Other than that, there are no promises in the index.js.

Css, html, and images in bundle all display correctly.

If the current behavior is a bug, please provide the steps to reproduce.

https://github.com/gdkoo/SleepWakeRegulate/blob/main/webpack.config.cjs

What is the expected behavior?

Using miniCSSExtractPlugin and HTML Webpack Plugin, index.html, style.css, and index.js should all be bundled into main.js and main.css, and an index.html should be generated in a public folder. This is all happening correctly. When running npm run build and npm run serve, the code all executes correctly. However, when served to Firebase hosting or another emulator, the bundled code executes everything except code from index.js. This ranges from simple console.log()s to images that are added to the DOM.

After some debugging, I found that removing the './style.css' import specifically (which thereby prevents the main.css bundle), rebundling, and serving publicly led to the rest of index.js file executing as expected. However, doing so removes the css stylesheet. I suspect the issue in my case might have to do with the miniCSSExtractPlugin.

Other relevant information:
webpack version: 5.83.1
Node.js version: v16.18.0
Operating System: macOS 11.0.1
Additional tools:
@webpack-cli/generators: ^3.0.1 => 3.0.1
babel-loader: ^9.1.0 => 9.1.0
css-loader: ^6.7.2 => 6.7.2
html-webpack-plugin: ^5.5.1 => 5.5.1
style-loader: ^3.3.1 => 3.3.1
url-loader: ^4.1.1 => 4.1.1
webpack: ^5.83.1 => 5.83.1
webpack-cli: ^5.0.1 => 5.0.1
webpack-dev-server: ^4.11.1 => 4.11.1